2

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.

1
  • If you are using setCustomValidity to make these lightning-input elements invalid in the first place, this should work fine. Perhaps you are setting the required attribute instead? In that case, you should make sure the variable that sets the required attribute is being updated correctly. Commented Sep 28, 2023 at 13:51

2 Answers 2

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

5
  • Hi Thanks for answer, but this is not what I asked. The purpose here is to CLEAR the errors on the input fields once the combobox value is changes and the fields are not required anymore.
    – Omnia
    Commented Sep 20, 2023 at 6:08
  • this will auto remove validation error message
    – A.K.
    Commented Sep 20, 2023 at 6:14
  • unfortunately this is not working on my side
    – Omnia
    Commented Sep 20, 2023 at 6:21
  • There could be some other error.
    – A.K.
    Commented Sep 20, 2023 at 6:30
  • As I said - when to user clicks on the save button - the input fields that are empty shows an error message (I implemented this logic on the save button). The issue here is when the user changes the value on the combobox and the error messeage still appear on the screen. Of course that if the user clicks on the save button now - everything works as expected, but my goal here is to remove the error message once the value is changed.
    – Omnia
    Commented Sep 20, 2023 at 6:54
1

I managed to solve the issue with the following code:

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

You must log in to answer this question.

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