使用 Javascript 提交 HTML5 表单并验证其输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6856220/
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
Submit HTML5 Form using Javascript and validate its inputs
提问by Ahmed Elmorsy
I'm writing form and adding html5 validation attributes to its input like "required", "autofocus". I use Javascript to submit the form using document.myForm.submit() but it doesn't validate the form against the html5 validation attributes as they aren't there.
我正在编写表单并将 html5 验证属性添加到其输入中，例如“必需”、“自动对焦”。我使用 Javascript 使用 document.myForm.submit() 提交表单，但它不会根据 html5 验证属性验证表单，因为它们不存在。
Any Suggestions?
有什么建议？
回答by pimvdb
It appears that triggering a clickon the submit button does have the correct effect: http://jsfiddle.net/e6Hf7/.
似乎click在提交按钮上触发 a确实具有正确的效果：http: //jsfiddle.net/e6Hf7/。
document.myForm.submitButton.click();
and in case you don't have a submit button, add an invisible one like:
如果您没有提交按钮，请添加一个不可见的按钮，例如：
<input type="submit" style="display:none" name="submitButton">
回答by zutnop
The pimvdb's answer is based on a workaround to include a hidden submit button.
pimvdb 的答案基于包含隐藏提交按钮的解决方法。
HTML5 provides javascript functions to achieve the same thing without a submit button. As Tigraine pointed out, Mozilladocuments two validity checking methods for 'form' elements:
HTML5 提供了 javascript 函数，无需提交按钮即可实现相同的功能。正如 Tigraine 所指出的，Mozilla记录了“表单”元素的两种有效性检查方法：
- checkValidity() return true/false and doesn't show anything to the end user
- reportValidity() return true/false and ALSO shows the validation messages to the end user (like the normal submit button click does)
- checkValidity() 返回 true/false 并且不向最终用户显示任何内容
- reportValidity() 返回 true/false 并且还向最终用户显示验证消息（就像普通的提交按钮点击一样）
<!DOCTYPE html>
<html>
<body>
<form name="testform" action="action_page.php">
E-mail: <input type="email" name="email" required><br/>
<a href="#" onclick="javascript:console.log(document.testform.reportValidity());return false;">Report validity</a><br/>
<a href="#" onclick="javascript:console.log(document.testform.checkValidity());return false;">Check validity</a><br/>
<a href="#" onclick="javascript:if(document.testform.reportValidity()){document.testform.submit();}return false;">Submit</a>
</form>
</body>
</html>回答by Tigraine
Why not simply call the validation manually before you do document.myForm.submit()
为什么不在执行 document.myForm.submit() 之前简单地手动调用验证
What validation framework do you use and what AJAX library?
您使用什么验证框架以及什么 AJAX 库？
In case you use jQuery here is the code to prevent the submit:
如果您使用 jQuery，这里是防止提交的代码：
$('#myForm').submit(function(evt) {
if (! $('#myForm').validate()) {
evt.preventDefault();
}
});
And trigger the submit through:
并通过以下方式触发提交：
$('#myForm').submit();
This would call the validation whenever submit is triggered.. And if the validation fails it prevents the submit from executing. But I'd look at your validationframework as it usually should do this already
这将在触发提交时调用验证。如果验证失败，它将阻止提交执行。但我会看看你的验证框架，因为它通常应该已经这样做了
In case you don't use any JavaScript framework you may want to have a look at: element.checkValidity();and how to invoke the HTML5 validation from JavaScript before even calling submit.
如果您不使用任何 JavaScript 框架，您可能需要查看：element.checkValidity(); 以及如何在调用提交之前从 JavaScript 调用 HTML5 验证。
