How to catch Chrome field validation error event

Question

I use the HTML5 form field type 'email'. Chrome will validate the field's value on submit and notify the user visually with a tooltip message in case of an error.
At the same time I've attached a JS plugin to the submit button which disables it on submit and changes the text into "Logging in ...".

How do I catch the event in case of an validation alert/error?
I need this in order to enable the Submit button again.

kind regards,
Bart

Edit:
So I found a way to disable the validation: stackoverflow.com/questions/3090369/… But still the question remains: is there a way to catch the event?

Answer 1

You can listen on the invalid event or set the oninvalid attribute. It will kick in when you're trying to submit the form but validation on the element fails.

function listener(event) {
    event.preventDefault(); // prevent the browsers default behavior
    console.log(event); // log the generated event
}

var input = document.getElementById('number');
input.addEventListener('invalid', listener);

Demonstrated on JSFiddle