如何检查不包含提交按钮的HTML5表单的有效性？

Question

我有以下代码示例，可以在浏览器中查看，当他们在输入中看到HTML5“required”时，就像这里的电子邮件一样：

<form id='myForm'>
    <div>
    <label>Email:
      <input name=email type=email required title="enter your email">
    </label>
    <input type=submit>
    </div>
</form>​

以上是fiddle。

但是在我的应用程序中，我使用了我的表单之外的按钮，以及以下代码附加到该按钮的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检查来检查表单的有效性？

Answer 1

假设您已将表单元素设置为名为$form的对象，则if (!$form.valid || $form.valid())是一种聪明的语法，意味着“如果$form没有名为{{1}的方法}，或者如果valid返回true“。通常，您将在那时安装并初始化jQuery Validation插件，但这样可以防止在未加载验证插件时禁用表单。

你可以使用HTML5方法valid()进行类似的测试，看起来像这样：

checkValidity

编辑：checkValidity为a function from the HTML5 forms spec。截至2016年2月，CanIUse.com报告over 95% of browsers support it。

Answer 2

在HTML5中，您可以在元素上使用“form”属性将其与Form元素显式关联，而不管它在页面结构中的位置如何： http://developers.whatwg.org/association-of-controls-and-forms.html#attr-fae-form

在兼容的浏览器中，您应该能够将输入[type = submit] [form = id]元素放在任何位置，并且仍然可以正确触发验证和提交过程。

我倾向于在表单的“提交”事件处理程序中放置应该拦截提交过程的代码，这样，用户按下Enter键以及我拥有的任何输入[type = submit]按钮就会触发它。