checkValidity以更新UI

问题描述 投票:16回答:2

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

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

是否有一种方法可以调用浏览器的本机行为进行验证,因此我们可以看到气球以及突出显示和集中显示的无效字段?

javascript html5 css3 validation
2个回答
9
投票

仅触发实际的表单提交-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与本机表单提交通过相同的algorithm运行。因此,您可以自由使用turn off the default bubbles并实现自己的。例如this


0
投票

自2012年以来时间在流逝,现在有了reportValidity()方法。

© www.soinside.com 2019 - 2024. All rights reserved.