0

I'm using lightning-record-edit-form in the component, inside that i've input-field with required set to true

    <lightning-record-edit-form record-type-id={recordType} object-api-name="Case" onsubmit={handleSubmit}>
        <lightning-input-field field-name='Api Name' required=true></lightning-input-field>
...... with several other input fields
        <lightning-button class="slds-m-top_small" variant="brand" type="submit" label="Submit">
    </lightning-record-edit-form>

When i click on Submit without filling required the focus does not go to the required field/s. Unless user scroll up and down may not realize missing required fields.

Any solution ?

EDIT :

This problem exists for Picklist fields only not for normal Text.

2

You should receive a deployment error if you specify the required attribute in that way. See the error I received trying to do the same thing you have in your example:

LWC1037: To set a boolean attributes, try <lightning-input-field required> instead of 
<lightning-input-field required="true">. If the attribute is present, its value must
either be the empty string or a value that is an ASCII case -insensitive match for the
attribute's canonical name with no leading or trailing whitespace.

I would recommend changing your attribute to only "required" (see below), verify that it deploys, and then test.

<lightning-input-field field-name="Api Name" required></lightning-input-field>

What is the data type of the field? That could also be a factor if it's a picklist. Only the following HTML tags will obey the required attribute in a form:

  • text
  • search
  • url
  • tel
  • email
  • password
  • date
  • number
  • checkbox
  • radio
  • file

Worst case scenario, you may have to do write your own validation.

EDIT: If you need to do your own validation, you need to add the logic to your onsubmit event handler, handleSubmit(). The handleSubmit method returns true if you want the submit to continue forward or false if you need to stop it for whatever reason. So your handleSubmit will look something like this:

handleSubmit(event) {
    return hasValidFields();
}

hasValidFields() {
    // do your validation here
    // use .focus() to focus in on fields that need addressed
    // I like to iterate over the fields here so that you can 
    // 1) apply focus to the first problem element and 
    // 2) put error styling on every other problem element
    // 3) amass a collection of error messages to show or use in other rules
    // .checkValidity() is a helpful method for checking HTML5 fields 
    // against specific patterns you may have set in the markup.

    return isValid;
}
| improve this answer | |
  • but still it doesnt solve actual problem that i have stated. I want auto scroll to happen to the missing field/s when clicked on Submit. – steamyfire Apr 18 at 13:28
  • I added an example of doing your own validation in the handleSubmit method. Can you tell us what the field renders as and what the type the field is in Salesforce? That may clue us in to as to why the HTML5 validation isn't happening in your browser. I wonder if browser configurations can bypass the form validation? It's difficult to say. – nbrown Apr 20 at 13:24
  • handleSubmit method itself will not be called if the required set fields are not filled. salesforce.stackexchange.com/questions/310926/… – steamyfire Jun 27 at 15:17
  • That is by design. The browser forces the required fields to be checked before a submit event can execute (otherwise there's no guarantee they'll be checked as the submit event sends a payload to the server). You can add a click event to the button instead and only call submit should everything validate, but this is not a Salesforce-specific issue. It's the normal sequence for DOM events. – nbrown Jun 29 at 12:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.