HTML5 Chrome checkValidity onBlur

Question

I am trying to do a simple checkValidity of a numeric input field when blurring, but cannot make it work correctly. Does it still work in Chrome? For instance:

<input onBlur="checkValidity()" type="number" name="x" id="x" min="64" max="2048" value=64> 

or

 <input onBlur="this.checkValidity()" type="number" name="x" id="x" min="64" max="2048" value=64> 

Seems to be doing nothing. However, in the console,

 $("#x")[0].checkValidity() 

returns true or false based on the current value in the input field and the limits above (64,2048). Is it broken or am I doing it wrong?

Answer 1

This is a demonstration of what you may wish for:

http://jsfiddle.net/9gSZS/

 <input type="number" min="64" max="256" onblur="validate(this);" /> 

 function validate(obj) { if(!obj.checkValidity()) { alert("You have invalid input. Correct it!"); obj.focus(); } } 

Noted that I am simply demonstrating the concept here; alert can cause a very unpleasant experience, so do not just copy it.

Use a floating DIV to attract your user instead of completely blocking the alert .

Answer 2

You must use onChange Event

eg

 var input1 = document.getElementById('txt_username'); input1.onchange = function(){ input1.setCustomValidity(input1.validity.patternMismatch ? 'username must match az,AZ,0-9,4-16 character' : ''); } 

Answer 3

onblur="checkValidity()" does not work because the blur event is not canceled.

Answer 4

onBlur does not work in chrome when it says so. This is mistake. It only works if the blur is lowercase. Like it ---> onblur. Hope this helps!