Question

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

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

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;

HTML5验证：使用willValidate的JavaScript怪异

2 个答案: