要更新UI的checkValidity

Question

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

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

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

Answer 1

自2012年以来，时间已经过去了，现在有了一种reportValidity()方法。

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

更多详情at MDN。

这适用于Chrome (40+)、Edge (17+)、火狐(49+)、歌剧和Safari，但不适用IE。

Answer 2

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

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

要确保表单不会实际提交，只需向<form>附加一个阻止默认操作的submit事件处理程序，然后执行AJAX调用。

这之所以有效，是因为除非表单满足其所有约束(即具有有效数据)，否则不会触发submit事件。因此，显式地调用checkValidity是不必要的。

编辑(11/7/12)以处理评论。

在本例中，对于实际的表单提交，我只是指的是使用提交按钮完成的非AJAX提交。要显示原生气泡并将焦点切换到适当的表单元素，这是实现这一点的唯一方法。如果没有submit按钮，您可以创建一个隐藏的按钮，并使用它来触发提交；it will still work。

我同意这种方法不太理想，但它在all supporting browsers中确实有效。使用这种方法而不是调用form.submit()的唯一原因是因为form.submit()不会触发本机验证。对我来说，这里的问题不是没有应用程序接口来触发验证，而是调用form.submit()不会。该规范指出，只要“需要用户代理来静态验证表单元素表单的约束”，就应该运行constraint validation。我不知道为什么调用form.submit()不适用。

应该注意，checkValidity确实通过与本机表单提交相同的algorithm运行。因此，您可以自由地turn off the default bubbles并实现您自己的。例如像this这样的东西。