17

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

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

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

4

2 回答 2

10

只需触发实际的表单提交 - 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 通过与本机表单提交相同的算法运行。因此,您可以自由关闭默认气泡并实现自己的。例如像这样的东西。

于 2012-11-06T03:22:32.990 回答
5

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

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

MDN 上的更多详细信息。

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

于 2019-12-20T15:02:19.543 回答