Pure javascript html 5 text type number range validation

Question

I have a page that I'm building and do not have the option to import jQuery. I need to be able to determine if any textboxes are marked with an html 5 invalid psuedoclass using a pure javascript solution. Said more simply: I need to use javascript to determine if any of the textboxes have the red outline that textboxes get marked with if you, for example, put text in a type=number field.

Just for completeness, here's some sample code:

<input type="number" min="1" max="31" id="txtCalDays" placeholder="##"/>
<input type="button" onclick="ValidateForm()"/> 
...
<script>
...
function ValidateForm(){
    ... //magic happens here
    if (numberInvalidTextboxes == 0){ SubmitFormViaAjax(); }
}

Answer 1

You can use checkValidity() method to detect the validity of a html5 input element.

document.getElementById('txtCalDays').checkValidity()

Here is the fiddle:

http://jsfiddle.net/k7moorthi/saobbfzo/