Introduction

Validation is essential to ensure data correctness and user-friendly error handling. In Lightning Web Components (LWC), the core methods used for field validation are setCustomValidity, checkValidity, and reportValidity. This blog explains these concepts before diving into a practical Parent-Child LWC example.

Understanding Validation Methods

1. setCustomValidity

• Allows you to set a custom error message for a field.
• If the input does not meet certain criteria, this method specifies the error message to display.
• To reset the error, pass an empty string ('').

Example:

//Set error message for UI
input.setCustomValidity('This field cannot be empty.');
// Clear the error message for UI
input.setCustomValidity('');

2. checkValidity

• Validates the field against its constraints, such as required or pattern.
• Returns true if the field passes validation, false otherwise.

//check if the input field is valid
if (input.checkValidity()) {
    console.log('Field is valid!');
} else {
    console.log('Field is invalid!');
}

3. reportValidity

• Displays the validation error to the user if the field is invalid.
• Combines the behavior of checkValidity and setCustomValidity.

// Report validity to show the error message
input.reportValidity();

Example Scenario: Parent-Child Validation

In this example, we’ll create a Parent-Child LWC setup where the Parent Component triggers validations in the Child Component.

• The parent component contains buttons that trigger validation methods in the child component.
• The child component has form fields (like lightning-input, lightning-combobox, and lightning-textarea) and validation logic.
• The child component also has a button to self validate the fields.

The parent component can:

1. Validate specific fields in the child component.
2. Validate all fields in the child component.

Key Features and Highlights

1. Parent-Triggered Validation:
   • The parent component (parentValidation) interacts with the child (childValidation) using template.querySelector(‘c-child-validation’) to invoke validation methods.
   • For example, clicking the parent’s button calls either validateSpecificFields([‘nameField’, ‘picklistField’]) or validateFields() on the child.
2. Field-Specific Validation:
   • The child component exposes a method validateSpecificFields(fieldNames) that validates only the specified fields (like Name and Picklist).
   • It uses the field’s data-id to find the element and applies custom error messages if validation fails.
3. Comprehensive Validation:
   • The child’s validateFields() method validates all fields, including the textarea. It checks if the textarea is empty and if all required inputs are filled, setting error messages as needed.
4. Dynamic Error Messages:
   • The child uses setCustomValidity to display user-friendly error messages directly on the form fields.
   • For example, if the textarea is empty, it shows “Please fill all required fields..”, and for short comments, “Comments must be at least 5 characters long.”

Sample Code –

In the below code we have also shown below –

• How you can set custom validity on onchange and remove it on onblur.
• How you can get the element using html input field type selector e.g. this.template.querySelectorAll(‘lightning-input, lightning-combobox’) or you can get the html input field via a custom attribute like data-id, e.g. this.template.querySelector(‘[data-id=”textareaField”]’);

Conclusion

Understanding and implementing validation methods like setCustomValidity, checkValidity, and reportValidity ensures that your LWC applications handle user input gracefully. By combining these methods in Parent-Child components, you can build robust forms with user-friendly validation mechanisms.