如何检查不包含提交按钮的HTML5表单的有效性？
我有以下代码示例在浏览器中工作，检查他们何时在输入上看到HTML5“required”，如此处的电子邮件：
这是上面的小提琴 。
但是在我的应用程序中，我在表单外部使用了一个按钮 ，以下代码附加到该按钮的click事件：
if (!$form.valid || $form.valid()) { $submitBt .disableBt(); $modal .removeBlockMessages() .blockMessage('Contacting Server, please wait ... ', { type: 'loading' }); $.ajax({ url: href, dataType: 'json', type: 'POST', data: $form.serializeArray() }) .done(onDone) .fail(onFail); }
我这里有两个问题：
- 以下代码的作用是什么：（！$ form.valid || $ form.valid（））
- 如何使用新的HTML5检查检查表单有效性？
假设你已经将form元素设置为一个名为$form的对象，那么if (!$form.valid || $form.valid())是巧妙的语法，意思是“如果$form没有一个名为valid的方法，或者如果valid()返回true“。 通常，您将在那时安装并初始化jQuery Validation插件，但是如果未加载validation插件，这将阻止表单被禁用。
你可以使用HTML5方法checkValidity进行类似的测试，看起来像这样：
if (!$form.checkValidity || $form.checkValidity()) { /* submit the form */ }
编辑 ：checkValidity是HTML5表单规范中的一个函数 。 截至2016年2月，CanIUse.com报告称超过95％的浏览器都支持它 。
在HTML5中，您可以在元素上使用“form”属性将其与Form元素显式关联，而不管它在页面结构中的位置如何： http ： //developers.whatwg.org/association-of-controls-and -forms.html＃ATTR-FAEforms
在兼容的浏览器中，您应该能够将输入[type = submit] [form = id]元素放在任何位置，并且仍然可以正确地触发validation和提交过程。
我倾向于在表单的“提交”事件处理程序中放置应该拦截提交过程的代码，这种方式是由用户按Enter键以及我拥有的任何输入[type = submit]按钮触发的。