How to add dynamically form validation with required field error message in lightning-input field in Lightning Web Component – LWC

[vijayk3327]

In this post we are going to learn about How to add dynamically form validation with required field error message in lightning-input field in Lightning Web Component – LWC.

→ Get source code live demo link:-

Step 1:- Create Lightning Web Component HTML ➡ lwcDynamicFormValidation.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" ></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"></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"></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="State" ></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="City" ></lightning-input>
         </div>

         <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium slds-m-bottom--medium">
           <lightning-input type="number" label="Pincode" ></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="Address" ></lightning-input>
         </div>
         
        
        <div class="slds-col slds-size_12-of-12 slds-text-align_center slds-m-top--small">
             <lightning-button label="Validate Form Action" variant="brand" onclick={validateAction} title="Validation Action"></lightning-button>               
        </div>
     </div>

        <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>

</lightning-card>

`

Step 2:- Create Lightning Web Component Javascript ➡ lwcDynamicFormValidation.js

` import { LightningElement } from 'lwc';

export default class LwcDynamicFormValidation extends LightningElement {
validateAction(event){
let fieldErrorMsg="Please Enter the";
this.template.querySelectorAll("lightning-input").forEach(item => {
let fieldValue=item.value;
let fieldLabel=item.label;
if(!fieldValue){
item.setCustomValidity(fieldErrorMsg+' '+fieldLabel);
}
else{
item.setCustomValidity("");
}
item.reportValidity();
});
}
}`

Step 3:- Create Lightning Web Component Meta XML ➡ lwcDynamicFormValidation.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> </targets> </LightningComponentBundle>

Step 4:- Create Lightning Application ➡ lwcDynamicFormValidationApp.app

<aura:application extends="force:slds"> <c:lwcDynamicFormValidation/> </aura:application>

→ Get source code live demo link:-