How to create a custom form validation and display required Error message upon handle input change in Lightning web component – LWC

[vijayk3327]

In this post we are going to learn about How to create a custom form validation and display required Error message upon handle input change in Lightning web component – LWC.

→ Get source code live demo link:-

Step 1:- Create Lightning Web Component : lwcFormValidation.html

`

        <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium slds-m-bottom--medium">
           <lightning-Input type="text"  label="Last Name" value={lastName} name="lastName" class="lastName" onchange={handleChangeValidation}></lightning-input>
        </div>
        
        <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium slds-m-bottom--medium">
           <lightning-Input type="text" label="Email" value={userEmail} name="userEmail" class="userEmail" onchange={handleChangeValidation}></lightning-input>
        </div>
        
        <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium slds-m-bottom--medium">
           <lightning-Input type="phone" label="Phone" value={userPhone} name="userPhone" class="userPhone" onchange={handleChangeValidation}></lightning-input>
        </div>
        
        <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium slds-m-bottom--medium">
           <lightning-input type="checkbox" label="Status" name="statusCheckbox" class="statusActive" onchange={handleChangeValidation}></lightning-input>
        </div>
        
        
     </div>


</lightning-card>

`

Step 2:- Create Lightning Web Component : lwcFormValidation.js

` import { LightningElement } from 'lwc';

export default class LwcFormValidation extends LightningElement {

handleChangeValidation(event){
  let getFirstName = event.target.name;
  let getLstName = event.target.name;
  let getUserEmail = event.target.name;
  let getUserPhone = event.target.name;
  let getStatusActive = event.target.name;
  let getCityName = event.target.name;


  if(getFirstName === "firstName"){
      let firstName = this.template.querySelector('.firstName');
      let firstNameVal = firstName.value;
      if(!firstNameVal){
        firstName.setCustomValidity('Please Enter the First Name');
      }else{
        firstName.setCustomValidity('');
      }
      firstName.reportValidity();
  }


  else if(getLstName === "lastName"){
    let lastName = this.template.querySelector('.lastName');
    let lastNameVal = lastName.value;
    if(!lastNameVal){
        lastName.setCustomValidity('Please Enter the Larst Name');
    }else{
        lastName.setCustomValidity('');
    }
    lastName.reportValidity();
   }

  
   else if(getUserEmail === "userEmail"){
    let userEmail = this.template.querySelector('.userEmail');
    let userEmailVal = userEmail.value;
    if(!userEmailVal){
        userEmail.setCustomValidity('Please Enter the Email Id');
    }else{
        userEmail.setCustomValidity('');
    }
    userEmail.reportValidity();
   }


   else if(getUserPhone === "userPhone"){
    let userPhone = this.template.querySelector('.userPhone');
    let userPhoneVal = userPhone.value;
    if(!userPhoneVal){
        userPhone.setCustomValidity('Please Enter the Email Id');
    }else{
        userPhone.setCustomValidity('');
    }
    userPhone.reportValidity();
   }


   else if(getStatusActive === "statusCheckbox"){
    let statusCheckbox = this.template.querySelector('.statusActive');
    let statusCheckboxVal = statusCheckbox.checked;
    if(!statusCheckboxVal){
        statusCheckbox.setCustomValidity('Please Check Mark the Status Checkbox');
    }else{
        statusCheckbox.setCustomValidity('');
    }
    statusCheckbox.reportValidity();
   }        

}

}`

Step 3:- Create Lightning Web Component : lwcFormValidation.js-meta.xml

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

→ Get source code live demo link:-