Validate LWC Input Data: How To Add Validations In Input Form

Hello folks, in this post we will see how to add validations in lwc input form and showing error message upon button click (most probably Save operation). In any input form we need to validate user entered data before commuting to database whether it is a insert/ update.

Also Check : Custom File Upload Component Along With New Record Creation

Example for Validate LWC Input Form Data: 

In below example we are going to create Contact form that contains First Name, Last Name, phone, email. Here we need to add validations like Name, email should be mandatory.

lwcValidateInputForm.html

<template>  
    <div class="slds-box slds-theme_default">  
      <div class="slds-m-around_medium">  
        <lightning-input type="text" max-length=12 required label="Name" onchange={onNameChange}></lightning-input>  
        <lightning-input type="tel" label="Phone" onchange={onPhoneChange}></lightning-input>
        <lightning-input type="email" required label="Email" onchange={onEmailChange}></lightning-input>    
      </div>  
      <div>  
        <center>  
        <lightning-button label="Save" onclick={saveContact}>  
        </lightning-button>  
        </center>  
      </div>  
    </div>  
  </template>

LwcValidateInputForm.js

import { LightningElement, track } from 'lwc';
export default class LwcValidateInputForm extends LightningElement {
    @track name;
    @track phone;
    @track email;

    onNameChange(event) {
        this.name = event.detail.value;
    }
    onPhoneChange(event) {
        this.phone = event.detail.value;
    }
    onEmailChange(event) {
        this.email = event.detail.value;
    }

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

        }
    }
}

Output:

If we need to make any field required then we need to mention "required" attribute in lightning-input tag so that we can show error message upon save button click. Once user click on save button, we are validating each filed by querying with the lightning-input. By using checkValidity() function we are checking each values entered in form. If all values are in required format then we can write further logic.

If we don't want standard error message, we can set custom message with the help of below attributes.


message-when-value-missing: Used for assigning custom error message when value missed on required field.
message-when-too-short: Used for assigning custom error message when entered value not meeting expected length. For this we need to add one more attribute i.e min-length.
message-when-too-long: Used for assigning custom error message when entered value exceeds expected length. For this we need to add one more attribute i.e max-length.
message-when-pattern-mismatch: Used for assigning custom error message when entered value not matching the expected pattern. This is used for email, url, phone, password, text. For this we need to add one more attribute i.e "pattern".

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

Subjects:

Lightning Web Components lightning-input validation lwc lightning-input-field validation lwc LWC LWC Basics Show Required Validation Message on Lwc input Form Validate LWC Input Values on Submit

Share This: