HTML5验证：使用willValidate的JavaScript怪异

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

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.为什么？

为了进一步反驳这一点,第二次警报确认了该领域存在问题,并且如预期的那样也是如此.

我错过了什么？

[旁注：MDN seems to think willValidate是一种方法,而不是财产.]

[编辑]

正如下面的评论者所指出的,willValidate会说该字段是否是验证的候选者,尽管它具有误导性的名称,但该字段是否会验证.

如果通过JS提交表单,那么可能意味着告诉字段是否将验证的唯一方法是迭代其有效性对象并查看是否有任何标志设置为true.

[编辑2]

事实证明,您可以检查字段上的validity.valid,即使您在console.log整个有效性对象中都没有显示有效标志.因此,这似乎是找出一个领域是否会假设验证的方式.

解决方法

willValidate是一个属性,表示输入是否可以被验证,而不是它是否有效. willValidate为false的唯一时间是输入元素是否被禁用等.

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

原文地址：https://www.jb51.cc/html5/241011.html