How can I get the HTML5 validity state of an input text box?

Question

How can I retrieve the HTML 5 'validity' status of a text box?

For instance, I have a text input with type="email". When the user enters the wrong value, the text box shows a red border (in Firefox browser).

How can I check the 'validity-state' of the input box?

Answer 1

You can use validity property:

var isValid = document.getElementById('email').validity.valid;

Or checkValidity() method:

var isValid = document.getElementById('email').checkValidity();

Demo | Reference.

Answer 2

There is an event oninvalid for invalid input, you can register the event if you want to act on it.