I'm trying to make fields are mandatory to fill, but its not working with lightning-input-field

How to achieve it with lightning-input-field

 <lightning-record-edit-form object-api-name="Sytems__c">

    <template for:each={defaultFields} for:item="field">
              <lightning-input-field required class="requiredField" key={field.name} variant="label-stacked" name={field.name} field-name={field.name}
        <lightning-button variant="brand" title="submit" onclick={validateFields} label="Save">


.JS Code below


        const isInputsCorrect = [...this.template.querySelectorAll('lightning-input-field')]
            .reduce((validSoFar, inputField) => {
                return validSoFar && inputField.checkValidity();
            }, true);
        if (isInputsCorrect) {
         //perform success logic



Uncaught TypeError: t.checkValidity is not a function throws

Straight from the documentation:

Requiring a Value for a Field

lightning-input-field supports requiredness specified on the server and client. In record forms, a required field is displayed with a red asterisk next to the field label. If you interact with a required field but don't enter a value, an error message is displayed below the field. Similarly, if you don't interact with a required field and try to submit the form, an error message is displayed.

To make an input field required on the server, mark the field Required in Setup. Input fields set as required on the server are universally required, to be displayed with a red asterisk wherever the input fields are used. For more information, see Require Field Input to Ensure Data Quality in Salesforce help.

To make an input field required on the client only, include the required attribute in lightning-input-field. Use this attribute if you want to require a value in a field before the form can be submitted, and the field isn't marked required in Setup. If the field doesn't have a value, the component's client-side validation catches the error before the form data is submitted to the server.

The client-side required setting and validation for requiredness is unrelated to the Required setting on the server. Note that you can't set required to false to disable the required setting on the server. The required field is still displayed with a red asterisk.

for this to work, you need to add the required attribute to the component.

Furthermore, if you need to add custom validation, you will need to add your custom handlers when the form is submitted, and manually perform the operation. You can achieve this by Overriding Default Behaviors of the record-edit-form as specified in the documentation

  • Hey I want to do it in custom validation because I'm not using standard submit button so that's why, here I'm using custom save method to save data also
    – Ravi Kumar
    May 1 at 16:08
  • Please refer to the documentation, how to achieve this is pretty straightforward and well documented, checkValidity is reserved for lightning-input components not for lightning-input-field
    – glls
    May 1 at 16:56

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.