1

I have a date input on LWC component, which when left empty should give a validation error. I am able to achieve that but the issue that I am facing is after the input gives error and i fill the date value, the error is not rendered empty.Let me show by screenshot Expected if value is left empty

when value is entered,the error still persists

Code:

validateFields(){
        let dateCmp = this.template.querySelector(".dateCmp");
        let dtValue =  dateCmp.value;

        if(!dtValue){
            dateCmp.setCustomValidity("Date value is required");
            dateCmp.reportValidity();
            return false;
        }else {
            dateCmp.setCustomValidity("");
            dateCmp.reportValidity();
            return true;
        }

    }
handleSend() {
        if (!this.validateFields()) return;
.............

Please let me know how can I achieve this? Any immediate help is very much appreciated.

Improve this question

1 Answer 1

Reset to default
1

Adding a onchange handler in input field will fix the issue for you. This means you validate the value once more on change.

<lightning-input class="dateCmp" onchange={validateFields} type="datetime" label="enter a date"></lightning-input>
Improve this answer
2
  • Thanks @Sanket Kumar ...What if i already have an onchange handler on the input cmp. onchange i am doing this : this.scheduleTime = event.detail.value; and then sending the updated value of scheduleTime..
    – PseudoDarwinist
    Nov 13, 2020 at 14:27
  • Just add the validation piece of code their or call the validateFields method inside that
    – sanket kumar
    Nov 13, 2020 at 16:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.