在表单中使用setCustomValidity需要两次点击onsubmit

Question

我工作的形式,利用了HTML5表单验证属性对required各种text和radio按钮领域.表单还有两组复选框,其中必须至少选中一个复选框.

为了保持用户的错误反馈一致,我使用该setCustomValidity方法在未选中复选框时抛出本机错误气泡.这一切都正常,但是,提交表单时使用错误反馈存在问题,并且onsubmit事件用于捕获未选中的复选框.当onclick事件绑定到提交按钮时,不会出现此问题,但我知道最好使用它onsubmit.

Onclick测试用例(点击提交按钮,第一次出现错误气泡!) http://jsfiddle.net/Jimadine/bZe5e/

提交测试用例(点击提交按钮 - 第二次点击后出现错误气泡) http://jsfiddle.net/Jimadine/2vLszqac/

此外,在我对onsubmit案例的测试中,Firefox在第一次点击提交按钮后突出显示未选中的复选框; 这通过复选框周围的红色光晕表示.然后在第二次单击后显示错误气泡.在其他现代浏览器中,第一次单击不会显示屏幕上指示复选框未选中; 我认为这就是在这些浏览器中实现HTML5验证的UX方面以及Firefox选择稍微不同的方式.

我的问题是为什么onsubmit测试用例需要两次点击,什么是纠正这种情况的合适方法,所以它的行为类似于onclick测试用例？我猜它与验证后触发的提交事件有关,但我不确定如何更正我的代码.

Answer 1

这是基于第一个示例http://jsfiddle.net/bZe5e/6/的可用jsfiddle 。

关键是不要仅在提交/按钮单击时执行此操作。您正在检查变更的有效性+最初

doValidate();