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">

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 ?


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


1 Answer 1


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;
  • 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, 2020 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, 2020 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, 2020 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, 2020 at 12:52

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .