function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Hari Sankar R 9Hari Sankar R 9 

With an onchange event handler on a lightning-input-field (text field) in LWC

Hi ,
Please help me in scenario for lightning-input-field (text field) in LWC .
Field like phone number,Text field ( name ) should throw  custom  validation error when field is null (require lightning input fields).
SwethaSwetha (Salesforce Developers) 
HI Hari,
Example code that you can customize as per your requirement: 
<lightning-input-field field-name="Phone" required onchange={handlePhoneChange}></lightning-input-field>
<lightning-input-field field-name="Name" required onchange={handleNameChange}></lightning-input-field>

In JS file, define the handlePhoneChange and handleNameChange functions to perform custom validation:

handlePhoneChange(event) {
  const phoneValue = event.target.value;
  if (!phoneValue) {
    event.target.setCustomValidity("Phone number is required");
  } else {
    event.target.setCustomValidity("");
  }
  event.target.reportValidity();
}

handleNameChange(event) {
  const nameValue = event.target.value;
  if (!nameValue) {
    event.target.setCustomValidity("Name is required");
  } else {
    event.target.setCustomValidity("");
  }
  event.target.reportValidity();
}
Related:
https://www.sfdcstop.com/2021/08/custom-validation-in-lightning-web.html?m=1
https://salesforce.stackexchange.com/questions/343804/how-to-show-a-custom-validation-message-on-a-field-in-lightning-record-edit-form
https://techdicer.com/custom-validation-in-lightning-web-component/

Thanks