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 seems to thinkwillValidate 是方法，而不是属性。]

[编辑]

正如下面的评论者所指出的，willValidate 表示该字段是否是验证的候选，而不是尽管其名称具有误导性，但该字段是否会验证。

如果通过 JS 提交表单，这可能意味着判断字段是否有效的唯一方法是遍历其 validity 对象并查看是否有任何标志设置为 true。

[编辑 2]

事实证明，您可以只检查字段上的 validity.valid，即使 valid 标志不会显示，如果您 console.log 整个有效性对象。因此，这似乎是确定一个字段是否会假设验证的方法。

Answer 1

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

Answer 2

The documentation 建议使用 .checkValidity() 其中

方法说明

checkValidity() 如果元素的值没有有效性问题，则返回 true；否则为假。如果元素无效，此方法也会在元素处引发无效事件。

while（正如@soktinpk's answer 正确声明的那样）.willValidate 只是将其标记为可用于验证，而不是通过验证。

因此我推荐使用这个：

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

---

题外话，alert 是一个糟糕的调试工具。考虑使用console.log 或debugger;