javascript - checkValidity 更新 UI

Question

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

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

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

Answer 1

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

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

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

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

编辑 (11/7/12) 以解决评论。

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

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

需要注意的是checkValidity是否运行相同的 algorithm作为原生表单提交。因此，您可以免费turn off the default bubbles并实现你自己的。例如类似 this 的东西.