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提交.要显示本机气泡并将焦点更改为相应的表单元素,这是实现此目的的唯一方法.如果没有提交按钮,您可以创建一个隐藏的按钮并使用它来触发提交; 它仍然有效.

我同意这种方法不太理想,但它确实适用于所有支持的浏览器.使用此hack而不是调用的唯一原因form.submit()是因为form.submit()不会触发本机验证.对我来说,这里的问题不是没有API来触发验证,而是调用form.submit()没有.该规范说,只要" 需要用户代理静态验证表单元素形式的约束 " ,就应该运行约束验证.我不知道为什么打电话不适用.form.submit()

应该注意的是,checkValidityDOES运行与本机表单提交相同的算法.因此,您可以自由关闭默认气泡并实施自己的气泡.例如像这样的东西.

Answer 2

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

如果元素的子控件满足其验证约束，则该HTMLFormElement.reportValidity()方法返回true。当false返回，取消invalid事件被激发每个孩子无效和确认问题报告给用户。

更多详情请见MDN。

这适用于 Chrome (40+)、Edge (17+)、Firefox (49+)、Opera 和 Safari，但不适用于 IE。