Q:

How to detect HTML5 constraint violation for input fields?

HTML5 umbrella specs have the :invalid CSS pseudo-class for styling input with broken content.
My Firefox 38.2.1 doesn't send a form if one of the fields is invalid.
How can I -- in pure browser JS / DOM API -- get the field containing invalid data?
How can I do that check for the entire form?

A:

You can get all invalid elements using querySelectorAll.
document.getElementById('test').onclick = function () {
    var invalid = document.querySelectorAll('input:invalid');
};

As you can see from the (simplistic) example above, I am doing this on the click event because the form won't submit if there are invalid elements.
The invalid variable contains a collection of invalid elements.
You can see a working example on JSFiddle.

