Validate Lightning Input Field On Button Click in Lightning Record Edit Form

lightning-input-field component in lightning-record-edit-form is used to display and edit the value of a record field. If the field is not required on field level, the lightning record edit form will not check weather user has enter the value in those lightning input fields or not. Many of you will debate that we have required attribute on lightning input which will validate lightning record edit form before onsubmit event.

How to validate lightning input field before onsubmit event using reportValidity?

Well, what if you want to validate Lightning Input Field on a custom button click in lightning web component before the onsubmit event? Yes, You can do that. Let’s Create a Lightning Web Component to check out this feature:-

Generally, Lightning Web Component has three file. In our case, the component is recordForm, so the it has these files:-

recordForm.html

The html has lightning-record-edit-form component to create a form that’s used to add a Salesforce record or update fields in an existing record. It has few lightning-input-field inside along with two buttons. The one of them will be used to demonstrate the capabilities of input field validation before submit event occurs.

<template>
    <div class="slds-p-bottom_large slds-p-left_large" style="width:500px">
        <lightning-record-edit-form object-api-name="Account" id="createAccountForm">
            <lightning-messages></lightning-messages>
            <lightning-input-field field-name="Name" required>
            </lightning-input-field>
            <lightning-input-field field-name="Phone" required>
            </lightning-input-field>
            <lightning-button type="submit" name="submit" label="Create Account">
            </lightning-button>
            <lightning-button onclick={validateFields} name="submit" label="Validate">
            </lightning-button>
        </lightning-record-edit-form>
    </div>
</template>

recordForm.js

The JavaScript file of the component has a method defined called validateFields which gets fired on the button with label validate in html file. We are accessing the elements where component name is lightning-input-field using querySelectorAll and using reportValidity method of the same component which check and throw error if field value is not valid and it is set required on component level using required attribute. In general terms, We check the lightning input field validation by using reportValidity.

import { LightningElement } from 'lwc';

export default class RecordForm extends LightningElement {
    validateFields() {
        this.template.querySelectorAll('lightning-input-field').forEach(element => {
            element.reportValidity();
        });
    }
}

recordForm.js-meta.xml

The meta.xml file of the lightning web component defines the metadata of the component like where you can use the component and many others. In our case, we have exposed the component to app, record and home Lightning pages in salesforce.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Demo – Validate lightning input field on button click in lightning web component

Thank you for reading out. You just learned the Lightning record edit form error handling before onsubmit event occurs. Check out some cool stuff on Lightning Web Component at https://salesforcediaries.com/