0

I have a requirement to build a custom layout in LWC, and for that I am using lighting-record-edit-form and lightning-input-field with the required attribute.

When the user tries to submit the form on the click of a button, I need to validate and check if the required fields have been filled up.

I tried to use the following code for the same,

const allValid = [...this.template.querySelectorAll('lightning-input-field')]

       .reduce((validSoFar, inputCmp) => {

           inputCmp.reportValidity();

           return validSoFar && inputCmp.checkValidity();

       }, true);

but I am getting an error when I click the button, "Error in $A.getCallback() [t.checkValidity is not a function]"

This piece of code works fine if I try to use lightning-input instead of lightning-input-field. The need to use lightning-input-field arises as there are some lookup fields that I need to render on the form.

Would anyone happen to know how can I validate the required fields successfully, and throw an error accordingly for lightning-input-field?

2
  • Is there a reason you need to check the validity of the field manually instead of using the default validation provided by lightning-record-edit-form? Feb 17, 2020 at 15:41
  • Some of the fields are required only at the ui level, and I’m using this component as part of a flow, hence I need to save the record much later on in the flow.
    – Nevds
    Feb 18, 2020 at 0:17

2 Answers 2

1

Okay, so the reason it is working with lightning-input but not with lightning-input-field is that the checkValidity() function is not available for lightning-input-field.

lightning-input: https://developer.salesforce.com/docs/component-library/bundle/lightning-input/specification

lightning-input-field: https://developer.salesforce.com/docs/component-library/bundle/lightning-input-field/specification

If i undestood the problem correctly reading the other comments, you want to mark as red(incomplete) the fields but the required attribute only makes it on the onblur event of the field.

if this is the problem you can mark as required the fields and then make a validate function that calls the reportValidity() function on the lightning-input-field element to mark it as incomplete (as it will check that the field is required but it is not filled).

An example:

validateFields() {

    let i;
    var formFields = Array.from(this.template.querySelectorAll('lightning-input-field'));

    for (i = 0; i < formFields.length; i++) {
        formFields[i].reportValidity();
    }
}
0

coming to lightning-input-field, You can use required property which makes sure If present, the input field must be filled out before the form is submitted. If this still does not suffice your need, You can use onsubmit event of the lightning-record-edit-form component.For example:-

handleSubmit(event){
   event.preventDefault();       // stop the form from submitting
   const fields = event.detail.fields;
   if(fields.Street === '32 Prince Street'){
      this.template.querySelector('lightning-record-edit-form').submit(fields);
   }else{
      //show the error using toast message or anything else you want
   }
}

The onsubmit event fired when the record edit form submits changed record data. This event is fired only when all fields in the form are valid.


Update

If you are trying to check the validity on a button click, You can use querySelector in button onclick method:-

html file

<template>
    <lightning-record-edit-form record-id={recordId} object-api-name="Contact">
        <lightning-messages>
        </lightning-messages>
        <lightning-input-field id="FirstName" field-name="FirstName">
        </lightning-input-field>
        <lightning-button variant="brand" label="check validity" title="Primary action" onclick={handleClick}
            class="slds-m-left_x-small"></lightning-button>
    </lightning-record-edit-form>
    <template if:true={iserror}>
        Error happened
    </template>
</template>

JS file

    handleClick() {
        this.template.querySelectorAll('lightning-input-field').forEach(element => {
            if (element.fieldName === 'FirstName') {
                if (element.value) {
                    this.iserror = false;
                } else {
                    this.iserror = true;
                }
            }
        });
    }
4
  • I am already using the required attribute, but that fires only if I step into the field and step out without putting in a value. Some of the fields are required only at the ui level, and I’m using this component as part of a flow, hence I need to save the record much later on in the flow. That is the reason I can’t use the submit event, but I need to manually check for required fields.
    – Nevds
    Feb 18, 2020 at 0:20
  • @Nevds check my update Feb 18, 2020 at 6:20
  • Thanks Sanket. I used the reportValidity method on input field to resolve the issue.
    – Nevds
    Feb 18, 2020 at 12:45
  • ahh, Ok:) I missed it Feb 18, 2020 at 12:46

You must log in to answer this question.

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