CODEWITHSUNDEEP
javascripthtmlvalidationinput
user4593252
user4593252

Reputation: 3506

Pure javascript html 5 text type number range validation

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

Upvotes: 4

Views: 2096

Answers (5)

Tim
Tim

Reputation: 5681

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.

Upvotes: 0

code_monk
code_monk

Reputation: 10120

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

https://developer.mozilla.org/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>

Upvotes: 1

Kesavamoorthi
Kesavamoorthi

Reputation: 969

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/

Upvotes: 3

user3320657
user3320657

Reputation:

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>

Upvotes: 2

hexa heart
hexa heart

Reputation: 181

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.

Upvotes: 2

Related Questions