HTML5和以编程方式提交的表单的验证

Question

我试图弄清楚我对HTML5表单的验证发生了什么，我注意到了：

1. 当我使用提交按钮提交表单时，验证工作正常
2. 当尝试使用jQuery submit（）函数以编程方式提交表单时，它会被提交并且验证似乎不起作用。
3. 当我以编程方式触发表单的提交按钮时，验证工作

在所有OSX浏览器（FF5，O11，Chr13）中都是一致的，但Safari 5实际上并未在两种情况下都进行验证。

Here is the jsFiddle to test.

知道为什么第二个选项不起作用？

Answer 1

似乎必须以某种方式触发提交按钮。这不会令人感到意外，因为当通过js更改文本输入的值时，浏览器也不会触发更改事件。

Answer 2

我已经完成了一些测试，似乎表单已经由click事件在表单中的第一个<input type="submit" />元素上触发了验证和提交。

当您的焦点位于表单中时（例如在某个输入元素中）并按enter时，会发生完全相同的事情。这就是浏览器处理表单提交的方式，我同意这有点奇怪。

您似乎可以使用HTML5 Constraint API以编程方式运行html5验证，但要注意浏览器支持。

Do any browsers yet support HTML5's checkValidity() method?

还有一些JavaScript图书馆可以帮助你。

• https://github.com/dpatru/checkValidity

• http://ericleads.com/h5validate/