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
- Do you know:- The cheapest and best smartphone in your budget 2022?
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 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 |
<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> <br/><br/> <!--Start RelatedTopics Section--> <div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;"> <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p> <br/><br/> <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p> <div style="display:block; overflow:hidden;"> <div style="width: 50%; float:left; display:inline-block"> <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li> <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li> <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li> <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li> <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li> </ul> </div> <div style="width: 50%; float:left; display:inline-block"> <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li> <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li> <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li> <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li> <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li> </ul> </div> <div style="clear:both;"></div> <br/> <div class="youtubeIcon"> <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a> </div> </div> </div> <!--End RelatedTopics Section--> </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
What are required pieces of a validation rule?
A validation rule can contain a formula or expression that evaluates the data in one or more fields and returns a value of 'True' or 'False'. Validation rules also include an error message to display to the user when the rule returns a value of “True” due to an invalid value.
How do I show alert in LWC?
Lightning Web component(LWC) can send a toast notification that pops up to alert users of success, error or warning. A toast can also simply provide information. To display a toast notification in Lightning Experience or Lightning communities, import ShowToastEvent from the lightning/platformShowToastEvent module.
How do you display error message below input field in lightning component?
All you have to do is check the validity attribute of your lightning:input , and your configured error messages will appear below it automatically.
Related Topics | You May Also Like
- Your reaction of the article ▾
A great information keep ongoing.
thanks.
such nice information, good
Great Information
5 Internet Approval Site (Do Follow Backlinks)
Great Information
such nice information, good…
I really thank you for sharing your experience.
Thanks For Sharing This Usefull Infomation please keep it up
Great work, thanks
Thank a lot for sharing this awesome info. I personally like the last point and follow me in my blog. I love to share on social media. keep it up!!!