如何检测输入字段的HTML5约束违规？

Question

HTML5保护规范具有:invalid CSS伪类，用于样式input内容破碎。

如果其中一个字段无效，我的Firefox 38.2.1就不会发送表单。

我如何 - 在纯浏览器JS / DOM API中 - 获取包含无效数据的字段？

如何检查整个表单？

Answer 1

HTMLFormElement 对象/类型有一个 checkValidity 方法，可用于检查。

在此处查看：https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement

Answer 2

您可以使用querySelectorAll获取所有无效元素。

document.getElementById('test').onclick = function () {
    var invalid = document.querySelectorAll('input:invalid');
};

正如您从上面的（简单）示例中看到的，我在click事件中执行此操作，因为如果存在无效元素，表单将无法提交。

invalid变量包含无效元素的集合。

您可以看到working example on JSFiddle。