You need to sign in to do that
Don't have an account?
Siva Sakthi
Email and Number, Text Input Field Validation Error in LWC
Hi All,
How to give the cusotm validation in LWC. I have added the JS function for each Lightning-Input field Validation. How to check fiels Value != Null or Not Empty.I am getting this below error. Please guide me where I made mistake and how to solve this.
Thanks
Siva
How to give the cusotm validation in LWC. I have added the JS function for each Lightning-Input field Validation. How to check fiels Value != Null or Not Empty.I am getting this below error. Please guide me where I made mistake and how to solve this.
HTML: --------- <div class="container-fluid"> <table class="slds-table slds-table_bordered slds-table_cell-buffer"> <thead> <tr class="slds-text-title_caps"> <th scope="col"> <div class="slds-truncate">#</div> </th> <th scope="col"> <div class="slds-truncate" title="Contact FirstName">Contact FirstName</div> </th> <th scope="col"> <div class="slds-truncate" title="Contact LastName">Contact LastName</div> </th> <th scope="col"> <div class="slds-truncate" title="Email">Email</div> </th> <th scope="col"> <div class="slds-truncate" title="Phone">Phone</div> </th> <th scope="col"> <div class="slds-truncate" title="Maximum">Maximum</div> </th> <th scope="col"> <div class="slds-truncate" title="Minimum">Minimum</div> </th> <th scope="col"> <div class="slds-truncate" title="Action">Action</div> </th> </tr> </thead> <tbody> <template for:each={contactList} for:item="con" for:index="indx"> <tr key={con.key} id={con.key}> <td>{indx}</td> <td> <lightning-input name="firstName" data-id={indx} value={con.FirstName} onchange={handleFirstNameChange} onblur={handleCustomValidationFirstName}></lightning-input> </td> <td> <lightning-input name="lastName" data-id={indx} value={con.LastName} onchange={handleLastNameChange} onblur={handleCustomValidationLastName}></lightning-input> </td> <td> <lightning-input data-id={indx} value={con.Email} onchange={handleEmailChange}></lightning-input> </td> <td> <lightning-input data-id={indx} value={con.Phone} onchange={handlePhoneChange}></lightning-input> </td> <td> <lightning-input data-id={indx} value={con.Maximum__c} onchange={handleMaximumChange}></lightning-input> </td> <td> <lightning-input data-id={indx} value={con.Minimum__c} onchange={handleMinimumChange}></lightning-input> </td> <td> <lightning-button-icon icon-name="utility:delete" data-id={indx} alternative-text="Delete" class="slds-m-left_xx-small" onclick={removeRow} title="Delete"></lightning-button-icon> </td> </tr> </template> </tbody> </table> <div class="slds-align_absolute-center slds-p-top_small"> <lightning-button name="Save" label="Save" onclick={saveRecord} if:true={addSaveNewRow}></lightning-button> </div> </div> JS: ------ handleCustomValidationFirstName(event) { let element = this.template.querySelector("[data-id='firstName']"); let value = element.value; if (value == '' || value == null ) { element.setCustomValidity("Error!"); } else { element.setCustomValidity(""); } element.reportValidity(); } handleCustomValidationLastName(event) { let element = this.template.querySelector("[data-id='lastName']"); let value = element.value; if (value == '' || value == null) { element.setCustomValidity("Error!"); } else { element.setCustomValidity(""); } element.reportValidity(); } handleSave(event) { let element = this.template.querySelector("lightning-input"); let value = element.value; if (value == '' || value == null) { element.setCustomValidity("Error!"); } else { element.setCustomValidity(""); } element.reportValidity(); const recordInputs = event.detail.draftValues.slice().map(draft => { const fields = Object.assign({}, draft); return {fields}; }); //const recordInput = {fields}; const promises = recordInputs.map(recordInput => updateRecord(recordInput)); Promise.all(promises).then(() => { // Clear all draft values this.draftValues = []; // Display fresh data in the datatable return refreshApex(this.wiredDataResult); }).catch(error => { // Handle error }); }
Thanks
Siva
I have found the solution for custom validation in LWC lightning-input tag.
All Answers
Try the suggestions as mentioned in the below articles,
https://developer.salesforce.com/forums/?id=9060G0000005pzuQAA
https://success.salesforce.com/answers?id=9063A000000a1GYQAY
It might help you.
I have found the solution for custom validation in LWC lightning-input tag.