checkValidity更新UI

Question

当我们尝试提交HTML5表单时，如果一个或多个必填字段缺少值或发生其他一些错误（类型或长度不匹配），则会阻止表单提交。使用突出显示的无效字段更新UI，并聚焦第一个无效字段。此外，还有一个气球/气泡附加到第一个无效字段，并显示错误消息。

现在，如果它是一个Ajax表单，我们在调度Ajax调用之前调用myForm.checkValidity（）来确认错误。但是在调用checkValidity（）时，它不会影响突出显示无效字段并附加气泡的UI。

有没有办法调用浏览器的本机行为进行验证，因此我们可以看到气球以及突出显示并聚焦的无效字段？

Answer 1

只需触发实际的表单提交 - http://jsfiddle.net/tj_vantoll/ZN29S/。

实际表单提交将运行checkValidity，显示气泡错误，根据需要调用invalid事件处理程序等。

要确保表单实际上没有提交，您只需要将submit事件处理程序附加到阻止默认操作的<form>，然后执行AJAX调用。

这是有效的，因为除非表单已满足其所有约束（即具有有效数据），否则不会触发submit事件。因此，无需显式调用checkValidity。

编辑（11/7/12）以解决评论。

通过实际表单提交在这种情况下，我只是指使用提交按钮完成的非AJAX提交。要显示本机气泡并将焦点更改为相应的表单元素，这是实现此目的的唯一方法。如果没有提交按钮，您可以创建一个隐藏的按钮并使用它来触发提交; it will still work。

我同意这种方法不太理想，但它确实适用于all supporting browsers。使用此hack而不是调用form.submit()的唯一原因是因为form.submit()不会触发本机验证。对我来说，这里的问题不是没有API来触发验证，而是调用form.submit()没有。规范说每当“需要用户代理静态验证表单元素形式”的约束时，才应运行constraint validation。我不知道为什么调用form.submit()不适用。

应该注意checkValidity与本机表单提交的{{1}}相同。因此，您可以自由algorithm并实施自己的。{3}}。例如turn off the default bubbles。

Answer 2

时间从2012年开始持续发展，现在有一种reportValidity()方法。

  

如果元素的子控件满足其验证约束，则HTMLFormElement.reportValidity()方法将返回true。返回false时，将为每个无效子级触发可取消的invalid事件，并将验证问题报告给用户。

更多详细信息at MDN。

这适用于Chrome（40 +），Edge（17 +），Firefox（49 +），Opera和Safari，但不是IE 。