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

I have the following code example that works in browsers that check when they see the HTML5 "required" on an input like the email here:

我有以下代码示例在浏览器中工作，检查他们何时在输入上看到HTML5“required”，如此处的电子邮件：

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

Here is a fiddle for the above.

这是上面的小提琴。

However in my application I use a button outside of my form and the following code attached to the click event of that button:

但是在我的应用程序中，我在表单外部使用了一个按钮，以下代码附加到该按钮的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);
}

I have two questions here:

我这里有两个问题：

What does the following code do: (!$form.valid || $form.valid())
以下代码的作用是什么：（！$ form.valid || $ form.valid（））
How can I check my form validity using the new HTML5 checks?
如何使用新的HTML5检查检查表单有效性？

2 个解决方案

#1

Assuming that you have set the form element to an object called $form, then if (!$form.valid || $form.valid()) is clever syntax that means "if $form doesn't have a method called valid, or if valid() returns true". Typically you will have installed and initialized the jQuery Validation plugin by then, but this prevents the form from becoming disabled if the validation plugin is not loaded.

假设你已经将form元素设置为一个名为$ form的对象，那么if（！$ form.valid || $ form.valid（））是巧妙的语法，意思是“如果$ form没有一个名为valid的方法，或者如果valid（）返回true“。通常，您将在那时安装并初始化jQuery Validation插件，但是如果未加载验证插件，这将阻止表单被禁用。

You can do a similar test using the HTML5 method checkValidity, looking something like this:

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

if (!$form.checkValidity || $form.checkValidity()) {
  /* submit the form */
}

EDIT: checkValidity is a function from the HTML5 forms spec. As of February 2016 CanIUse.com reports that over 95% of browsers support it.

编辑：checkValidity是HTML5表单规范中的一个函数。截至2016年2月，CanIUse.com报告称超过95％的浏览器都支持它。

#2

In HTML5, you may use a "form" attribute on an element to explicitly associate it with a Form element regardless of where it is positioned in the page structure: http://developers.whatwg.org/association-of-controls-and-forms.html#attr-fae-form

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

In compliant browsers, you ought to be able to put your input[type=submit][form=id] element anywhere and still have it properly trigger the validation and submission process.

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

I tend to put code that is supposed to intercept the submission process in the form's "submit" event handler, that way it is triggered by users hitting the Enter key as well as any input[type=submit] buttons I have.

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

#1