HTML5验证：使用willValidate的JavaScript怪异 [英] HTML5 validation: JavaScript weirdness with willValidate

问题描述

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

OK this is a weird one. I'm sure I'm 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);

如果表单提交时字段留空，则提交被禁止，正如您所期望的那样，但第一个警报，检查字段的有效性状态，给出 true 。 为什么？

If the form is submitted with the field left blank, submission is suppressed, as you'd expect, but the first alert, checking the field's validity state, gives true. Why?

为了进一步反驳这一点，第二个警告确认该字段存在问题并且还提供 true ，如预期的那样。

To contradict this further, the second alert confirms there's a problem with the field and also gives true, as expected.

我缺少什么？

[旁注：MDN < a href =https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Constraint_validation_process =nofollow>似乎认为 willValidate 是一种方法，而不是财产。]

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

[编辑]

正如下面的评论者指出的那样， willValidate 表示该字段是否是候选用于验证，不是，尽管它误导性的名称，该字段是否会被验证。

As the commenter below points out, willValidate says whether the field is a candidate for validation, not, despite its misleading name, whether the field will validate.

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

Which presumably means the only means of telling whether a field will validate, should the form be submitted, via JS, is to iterate over its validity object and see if any flag is set to true.

[编辑2 ]

结果你可以在一个字段上检查 validity.valid ，即使有效标志没有'如果 console.log 整个有效性对象，则显示t。因此，这似乎是找出一个字段是否会假设验证的方式。

Turns out you can just check validity.valid on a field, even though the valid flag doesn't show up if you console.log the entire validity object. This would appear to be the way, therefore, to find out whether a field will hypothetically validate.

推荐答案

willValidate 是一个属性，表示输入是否可以验证，而不是它是否有效。唯一一次 willValidate 为假是输入元素被禁用等等。

willValidate is a property that says whether or not an input can be validated, not if it is valid or not. The only time that willValidate is false is if the input element is disabled or the like.

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

这篇关于HTML5验证：使用willValidate的JavaScript怪异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！