HTML5 Validation: JavaScript Strangeness with willValidate

Question

OK, this is strange. I am sure that I am missing something obvious.

http://jsfiddle.net/wVp8j/

HTML:

<form>
    <input type='text' required />
    <button>check field validity</button>
</form>

JS:

var field = document.querySelector('input[type=text]');
document.querySelector('button').addEventListener('click', function() {
    alert('Validates: '+field.willValidate);
    alert('Value missing: '+field.validity.valueMissing);
}, false);

If the form is submitted with the field left blank, the feed is suppressed, as expected, but the first warning that checks the state of validity of the field gives true. Why?

To counter this further, the second warning confirms that there is a problem with the field, and also gives true, as expected.

What am I missing?

[Sidenote: MDN seems to be willValidate a method, not a property.]

[ EDIT ]

, willValidate , , , , .

, -, , , ​​ JS, validity , - true.

[ 2]

, validity.valid , valid , console.log . , , , , .

Answer 1

willValidate - , , , . , willValidate , - .

. http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/#toc-willValidate

field.validity.valid , .

http://jsfiddle.net/3xFua/

(function() {
    var field = document.querySelector('input[type=text]');
    document.querySelector('button').addEventListener('click', function() {
        console.log('Validates: ', field.validity.valid);
        console.log('Value missing: ', field.validity.valueMissing);
    }, false);
})();

Answer 2

.checkValidity(),

checkValidity() true, ; false . , .

while ( @soktinpk answer ) .willValidate , .

, :

function() {
    alert('Validates: '+field.checkValidation());
    alert('Value missing: '+field.validity.valueMissing);
}

---

off-topic, alert - . console.log debugger;