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 pleteness, 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(); }
}

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 pleteness, 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(); }
}

• javascript
• html
• validation
• input

• 3 ":invalid" is a css selector you can use to find them – dandavis Commented Oct 8, 2015 at 20:22
• 1 To add to @dandavis 's answer, :invalid is supported only from IE10+, if that's any consideration to you. – Artless Commented Oct 8, 2015 at 20:28

5 Answers 5

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

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

Here is the fiddle:

http://jsfiddle/k7moorthi/saobbfzo/

You can use querySelectorAll

document.querySelectorAll('input:invalid') return an array of all invalid input in the document, you can replace document by any type of node.

Add some css like :invalid{background-color: rgba(250,0,0,.15);} can be usefull also.

Give an id or a class for each element and give the code this way:

window.onload = function () {
  document.getElementById("theFrm").onsubmit = function () {
    var inputs = document.querySelectorAll(".input");
    for (var i in inputs)
      if (!inputs[i].validity.valid) {
        inputs[i].focus();
        return false;
      }
    ajaxSubmit();
    return false;
  };
};

*:invalid, .error {border: 1px solid #f00; background: #f99;}

<form action="" id="theFrm">
  <input type="number" min="1" max="31" id="txtCalDays" required placeholder="##" class="input" />
  <input type="submit" onclick="ValidateForm()" /> 
</form>

I think the method you are looking for is checkValidity().

https://developer.mozilla/en-US/docs/Web/API/HTMLSelectElement/checkValidity

;(function(w,d,undefined) {
  
  "use strict";
  
  function init() {
    // bind checkValidity() to button click
    d.querySelector("button.validity").addEventListener("click",checkValidity);
  }
  
  // loop through inputs and check validity
  var checkValidity = function() {
    var inputs = d.querySelectorAll('#f input');
    [].forEach.call(inputs,function(input) {
      alert( 'validness of ' + input.name + ' is ' + input.checkValidity() );
    });
  };
  
  // inititalize only when the DOM is ready
  d.addEventListener("DOMContentLoaded",init);
  
})(window,document);

body {
  background-color: #DEF;
}
#f {
  width: 222px;
  position: relative;
  padding: 2em;
  margin: auto;
}
#f > * {
  margin-bottom: .25em;
}
#f label, button {
  float: left;
  clear: left;
  width: 100px;
}
#f input, #f button {
  float: left;
  width: 100px;
}

<form id="f">
  
  <label for="tel">Just Numbers</label><input type="text" name="numbrz" pattern="\d+" />
  
  <label for="email">Email</label><input type="email" name="email" />
  
  <button type="button" class="validity">check validity</button>
  
</form>

You can use ValidityState.valid:

var input = document.getElementById("test");

input.addEventListener("change", function (event) {
    
    if (test.validity.valid) {
        input.classList.add("valid");
        input.classList.remove("invalid");
    } else {
        input.classList.add("invalid");
        input.classList.remove("valid");
    }
});

input.invalid {
    outline: 1px solid red;
}

<input type="number" id="test">

Now you can check for the input.invalid instead of input:invalid selector.

To make this cross-browser, you can bind this event listener in addition to the change event, also to the input, blur, keyup and keydown events. Furthermore you will need a polyfill for classList.