HTML5和程序提交表单的验证

Question

我尝试了一段时间才发现我的HTML5表单验证出了什么问题，并且我注意到：

1. 使用提交按钮提交表单时，验证正常工作
2. 当尝试使用jQuery的submit()函数以编程方式提交表单时，表单被提交但似乎没有进行验证。
3. 当以编程方式触发表单的提交按钮时，验证有效。

这在所有OSX浏览器（FF5，O11，Chr13）中都是一致的，但Safari 5实际上在任何情况下都不会进行验证。 这里是jsFiddle测试链接。 为什么第二个选项不起作用？

- kwicher

---

你的 .submit() 在你的 fiddle 中实际上没有提交，因为你将提交按钮的 ID 设置为 submit。http://api.jquery.com/trigger/#comment-134514715 - pimvdb

此外，您可能希望将提交输入的ID更改为除“input”以外的其他内容。 - Perception

好的，我已经更改了表单按钮的ID以及表单的ID - 行为没有改变。 - kwicher

Answer 1

看起来提交按钮必须以某种方式被触发。这并不奇怪，因为当通过js更改文本输入的值时，浏览器也不会触发更改事件。

- Leif

Answer 2

我做了一些测试，似乎表单是通过表单中第一个<input type="submit" />元素上的click事件进行验证和提交的。

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

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

任何浏览器是否支持HTML5的checkValidity()方法？

此外，还有一些JavaScript库可帮助您完成此操作。

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

• http://ericleads.com/h5validate/

- Boris Brdarić