javascript - Display form errors if the checkValidity() method returns false - Stack Overflow

admin管理员组

文章数量:1400087

Short version of the question

Is there a way to trigger the native browser form validation error feedback with Javascript?

Detailed version of the question

When trying to submit a form that has a required input field that has not been filled by the user, modern browsers handle the validation automatically, and display an error for the input field where an error has been found.

Each browser handles this in an own way, but to get an idea, here is how Edge is doing it today:

I want to achieve the same native validation feedback but without using the submit event.

According to the documentation for HTMLSelectElement.checkValidity(), I am able to know if the form does validate or not.

I could use this true/false information and handle the visual feedback by writing custom code, but I wonder if there is a way to trigger the native browser error feedback, so I can save time.

Did I try something?

Yes, I tried using a mon submit button and using prevent default event to do what I like (and it works), but I want to know if there is a straight way to achieve this, something like HTMLSelectElement.displayErrors() would be logic.

UPDATE

In fact, the method does exist, it's called HTMLFormElement.reportValidity()

Short version of the question

Is there a way to trigger the native browser form validation error feedback with Javascript?

Detailed version of the question

When trying to submit a form that has a required input field that has not been filled by the user, modern browsers handle the validation automatically, and display an error for the input field where an error has been found.

Each browser handles this in an own way, but to get an idea, here is how Edge is doing it today:

I want to achieve the same native validation feedback but without using the submit event.

According to the documentation for HTMLSelectElement.checkValidity(), I am able to know if the form does validate or not.

I could use this true/false information and handle the visual feedback by writing custom code, but I wonder if there is a way to trigger the native browser error feedback, so I can save time.

Did I try something?

Yes, I tried using a mon submit button and using prevent default event to do what I like (and it works), but I want to know if there is a straight way to achieve this, something like HTMLSelectElement.displayErrors() would be logic.

UPDATE

In fact, the method does exist, it's called HTMLFormElement.reportValidity()

• javascript
• html
• validation

Share Improve this question Follow edited Jul 27, 2021 at 9:33 Álvaro Franz asked Jul 26, 2021 at 16:58 Álvaro FranzÁlvaro Franz 81111 gold badge1212 silver badges3131 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can do it by calling reportValidity() on the given input field.

const input = document.querySelector('input');

input.addEventListener('input', (e) => {
  e.target.reportValidity();
});

<input type="email" >

Thanks to Emil's answer, I made it work the way I wanted.

I am leaving it here for further readers but accepting Emil's answer since that was the key part.

According to the docs, you can run the checkValidity() method on the form itself, not necessarily on the child input.

function processForm(){

    // Early return form processing if validation errors where found
    if(!document.getElementById('form-id').checkValidity()){
        document.getElementById('form-id').reportValidity();
        return false;
    }

    // Okay, all cool, do stuff...

}

本文标签： javascriptDisplay form errors if the checkValidity() method returns falseStack Overflow