Javascript 如何检查不包含提交按钮的 HTML5 表单的有效性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12470622/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I check the validity of an HTML5 form that does not contain a submit button?
提问by Jeff Bowman
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“必需”：
<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 fiddlefor the above.
这是上述的小提琴。
However in my application I use a button outside of my formand the following code attached to the click event of that button:
但是，在我的应用程序中，我使用了表单之外的一个按钮，并将以下代码附加到该按钮的点击事件中：
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())
- How can I check my form validity using the new HTML5 checks?
- 以下代码有什么作用：(!$form.valid || $form.valid())
- 如何使用新的 HTML5 检查检查我的表单有效性？
回答by Jeff Bowman
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 $formdoesn'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，那么这if (!$form.valid || $form.valid())是一种巧妙的语法，意思是“如果$form没有名为 的方法valid，或者如果valid()返回 true”。通常，到那时您已经安装并初始化了 jQuery 验证插件，但这可以防止在未加载验证插件时表单被禁用。
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% 的浏览器支持它。
回答by jokeyrhyme
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 中，您可以在元素上使用“表单”属性来明确将其与表单元素相关联，而不管它在页面结构中的位置：http: //developers.whatwg.org/association-of-controls-and -forms.html#attr-fae-form
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.
在兼容的浏览器中，您应该能够将 input[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 键以及我拥有的任何 input[type=submit] 按钮触发。
