HTML5验证:使用willValidate的JavaScript怪异

Question

好的,这是一个奇怪的.我确定我错过了一些明显的东西.

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

如果表单在字段留空的情况下提交,则会按照您的预期抑制提交,但第一个警报会检查字段的有效性状态true.为什么？

为了进一步反驳这一点,第二次警报确认了现场存在问题,并且true正如预期的那样.

我错过了什么？

[旁注:MDN 似乎认为 willValidate是一种方法,而不是财产.]

[ 编辑 ]

正如下面的评论者指出的那样,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);
})();