HTML5 验证 API 在 Firefox 中不起作用？答案

【问题标题】：HTML5 Validation API not working in Firefox?HTML5 验证 API 在 Firefox 中不起作用？
【发布时间】：2014-01-03 05:40:48
【问题描述】：

HTML5 中 HTML 输入的有效性属性在 Firefox 中似乎不起作用。

var input = $input.get(0);
console.log(input.validity)

此控制台日志返回一个空对象。它适用于 Chrome 和 Safari，如果我查看该文档，我认为它也应该适用于 Firefox？

有什么想法吗？

【问题讨论】：

这是我从函数中获得的 jQuery 输入元素。 $input.get(0) 是获取html元素而不是jquery元素。
我试图reproduce你的问题，但不能。尝试包含完全重现问题所需的最少测试用例。
如果您尝试individual property，例如input.validity.valid，它会记录一个值吗？
@JonathanLonowski 哦，这行得通！我不明白为什么^^。为什么有效性返回一个空对象？
@Maxwell Firefox 可能只呈现enumerable 属性（即那些将出现在for..in 循环中的属性），而ValidityState 的每个属性可能都是enumerable: false。跨度>

【解决方案1】：

如果它显示为空对象，可能是因为只有 enumerable 属性被渲染，而 ValidityState's properties 似乎不在 Firefox 中。

但是，您仍然应该能够访问各个属性：

console.log(input.validity.valid);   // true/false
console.log(input.validity.tooLong); // true/false
// etc.

【讨论】：

【解决方案2】：

input.validity 返回一个特殊对象，而不仅仅是一个简单的布尔值。

所以，使用input.validity.valid 来检查输入的值是否正确。

查看此JSFiddle 以查看有效性属性。

还有这个MDN Article 关于ValidityState 对象。

就 Firefox 中的调试而言，Firebug 显示了这种东西。

【讨论】：