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/