How to clear form validation state in JavaScript?

How to clear form validation state in JavaScript?

Note that checkValidity () in your code has no effect anyway. checkValidity () never shows a validation message. [Bug 11287] New: ‘setCustomValidity’ call in element should use ‘oninput’ event… ‘setCustomValidity’ call in element should use ‘oninput’ event… So, what you do is making the element valid in the invalid event which is too late.

Why do I need to reset the validation state?

I want to reset the validation state so that the next answer can be checked and also to keep the displayed validation error message. If the validation state is not reset, then even the next, correct answer will incorrectly show a validation error message. So somehow, “clear” means “close”?

What to do when form validation is too late?

‘setCustomValidity’ call in element should use ‘oninput’ event… So, what you do is making the element valid in the invalid event which is too late. After the invalid event, Firefox tries to show the UI using the validationMessage which return the empty string when the form is valid.

How to reset form validation state in Firefox?

Setting an empty string, setCustomValidity (“”);, in Firefox and Chrome closes the form validation error message. I do not want to close the form validation error message. I want to reset the validation state so that the next answer can be checked and also to keep the displayed validation error message.

What to do if form is not valid in JavaScript?

If the submitted from submit () method flag is not set, and the submitter element’s no-validate state is false, then interactively validate the constraints of form and examine the result: if the result is negative (the constraint validation concluded that there were invalid fields and probably informed the user of this) then abort these steps.

Is there a way to change the validity of a form?

You should use onchange/oninput (emphasis added) to change the validity state if you want the form to be submitted. The fix is to validate the input with the “input” event handler instead of the “submit” event handler.