Hey guys, today 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.
Files we used in this post example:-
| lwcFormValidation.html | Lightning Web Component HTML | Template HTML file for used to write HTML element for user interface.. |
| lwcFormValidation.js | Lightning Web Component JavaScript | It is holding Form Validation function that is display the required Error message on handle changing lightning input field. |
| lwcFormValidation.js-meta.xml | XML Meta File | It is used for where this lightning web component you want to exposed… |
Live Demo
Other related post that would you like to learn in LWC
Step 1:- Create Lightning Web Component : lwcFormValidation.html
SFDX:Lightning Web Component >> New >> lwcFormValidation.html
lwcFormValidation.html [Lightning Web Component HTML]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<template> <lightning-card title="Create a custom form validation in Lightning web component - LWC" icon-name="custom:custom12" size="small"> <div class="slds-grid slds-wrap"> <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium slds-m-bottom--medium"> <lightning-Input type="text" label="First Name" value={firstName} name="firstName" class="firstName" 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="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> </template> |
Step 2:- Create Lightning Web Component : lwcFormValidation.js
SFDX:Lightning Web Component >> New >> lwcFormValidation.js
lwcFormValidation.js [LWC JavaScript File]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
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
SFDX:Lightning Web Component >> New >> lwcFormValidation.js-meta.xml
lwcFormValidation.js-meta.xml [LWC Meta Data XML]
|
1 2 3 4 5 6 7 8 9 10 11 |
<?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> |
Further post that would you like to learn in LWC
Related Topics
How to validate child component from parent component on click button using aura method in lightning component
Custom Validation in a Lightning Input Field on Click Button
How to display account related contacts based on account name using search input and click button in Salesforce lightning web component – LWC
Creating a Lightning Datatable with Row Actions and Display a Modal Popup on Click View Icon Button in Salesforce Lightning Web Component – LWC
A great information keep ongoing.
thanks.
such nice information, good
Great Information
5 Internet Approval Site (Do Follow Backlinks)