Reset Custom Validity On LWC Input on Value Change

Question

I have a lightning-combobox with 2 options. If the user choose value X - then all the form fields are required. If the user choose value Y - the fields are not required.

When the user choose value X, press the save button - then all the lightning-input fields that are empty show error message (which is the desired behavior).

My issue is when the user now changes from value X to value Y - then the error message are still shows on the input fields, which i'm trying to remove.

I used the change event handler with the following code:

this.template.querySelectorAll('lightning-input').forEach(element => {
            element.setCustomValidity('');
            element.reportValidity();
        });

And it's not working - meaning that the error message are not disappearing. Am I missing anything else here ?

Thanks.

Answer 1

For single input you can simple use input.validity.valid this will return your validity.

Single Input

HTML:

<template>
    <lightning-input
        class="input"
        label="Enter some text"
        onblur={handleBlur}
    >
    </lightning-input>
</template>

JS:

    handleBlur(event) {
        var input = this.template.querySelector(".input");
        console.log(input.validity.valid); //returns true
    }

For multiple input: You can use checkvalidity() method to validate input again. Same method will validate your input and show message based on your latest data.

HTML

<template>
    <lightning-input label="First name" placeholder="First name" required>
    </lightning-input>
    <lightning-input label="Last name" placeholder="Last name" required>
    </lightning-input>
    <lightning-button type="submit" label="Submit" onclick={handleClick}>
    </lightning-button>
</template>

JS:

    handleClick(evt) {
        console.log('Current value of the input: ' + evt.target.value);

        const allValid = [
            ...this.template.querySelectorAll('lightning-input'),
        ].reduce((validSoFar, inputCmp) => {
            inputCmp.reportValidity();
            return validSoFar && inputCmp.checkValidity();
        }, true);
        if (allValid) {
            alert('All form entries look valid. Ready to submit!');
        } else {
            alert('Please update the invalid form entries and try again.');
        }
    }

Custom Validation

The component supports setCustomValidity() from HTML5's Constraint Validation API. To set an error message, provide a quoted string to display. To reset the error message, set the message to an empty string ("")

HTML:

<template>
    <lightning-input class="inputCmp" label="Enter your name:">
    </lightning-input>
    <lightning-button label="Register" onclick={register}> </lightning-button>
</template>

JS

    register(event) {
        var inputCmp = this.template.querySelector('.inputCmp');
        var value = inputCmp.value;
        // is input valid text?
        if (value === 'John Doe') {
            inputCmp.setCustomValidity('John Doe is already registered');
        } else {
            inputCmp.setCustomValidity(''); // if there was a custom error before, reset it
        }
        inputCmp.reportValidity(); // Tells lightning-input to show the error right away without needing interaction
    }

Ref : https://developer.salesforce.com/docs/component-library/bundle/lightning-input/documentation

Answer 2

I managed to solve the issue with the following code:

Promise.resolve().then(() => {
            this.template.querySelectorAll('lightning-input').forEach(element => {
                element.reportValidity();
            });
        });