0

In my custom page i have multiple multiple row, contains lightning-input, lightning-combobox and lightning-textarea it has horizontal scroll.

Each field has its own validation logic. My question here is Iam writing one method in Js file if any field has the setCustomValidity .value = true then i need to highlight the entire row in red color

Trying the below approach saying if any lightning-textarea field has setCustomValidity !=null then i can get the element highlight the entire row in red color.

But this is not working for me can anyone help me on this.

handletesting() {
    let textAreaElement = this.template.querySelectorAll('lightning-textarea');
    textAreaElement.forEach(element => {
      console.log('element ' + element.setCustomValidity);
      console.log('element ' + element.reportValidity.value);
      console.log('element ' + element.checkValidity);
    });
  }

this is how iam setting the validation required message

 element.setCustomValidity("Value is required");
 element.reportValidity();

Please let me know if any additional details required.

1 Answer 1

4
+25

Looking at lightning-input which contains a section on validity

To check the validity states of an input, use the validity attribute, which is based on the Constraint Validation API. To determine if a field is valid, you can access the validity states in JavaScript.

...

This validity attribute returns an object with the following read-only boolean properties.

badInput: Indicates that the value is invalid for any input type.

customError: Indicates that a custom error has been set. See Custom Validity Error Messages. ...

valid: True if none of the preceding properties are true.

You'll want to interact with the validity attribute

let textAreaElement = this.template.querySelectorAll('lightning-textarea');
textAreaElement.forEach(element => {
    //should return false
    console.log('element ' + element.validity.valid);
    //should return true
    console.log('element ' + element.validity.customError);

});

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .