使用 Javascript 提交 HTML5 表单并验证其输入答案

【问题标题】：Submit HTML5 Form using Javascript and validate its inputs使用 Javascript 提交 HTML5 表单并验证其输入
【发布时间】：2011-07-28 08:41:42
【问题描述】：

我正在编写表单并将 html5 验证属性添加到其输入中，例如“必需”、“自动对焦”。我使用 Javascript 使用 document.myForm.submit() 提交表单，但它不会根据 html5 验证属性验证表单，因为它们不存在。

有什么建议吗？

【问题讨论】：

标签： javascript forms html

【解决方案1】：

看来在提交按钮上触发click 确实有正确的效果：http://jsfiddle.net/e6Hf7/。

document.myForm.submitButton.click();

如果您没有提交按钮，请添加一个不可见的按钮，例如：

<input type="submit" style="display:none" name="submitButton">

【讨论】：

@Ahmed Elmorsy：在 Chrome 中对我有用。小提琴不适合你吗？
我也在使用 Chrome。属性 submitButton 未定义
@Ahmed Elmorsy：显然，您需要命名提交按钮。在 jQuery 中，您也可以使用 $('form > input[type=submit]').click().
我没有提交按钮我正在使用 href="javascript:document.myForm.submit()" 制作锚点
@Ahmed Elmorsy：您可能想要添加一个不可见的。喜欢<input type=submit style=display:none>。

【解决方案2】：

pimvdb 的答案基于包含隐藏提交按钮的解决方法。

HTML5 提供了 javascript 函数来实现同样的事情，而无需提交按钮。正如 Tigraine 所指出的，Mozilla 记录了“表单”元素的两种有效性检查方法：

checkValidity() 返回真/假，不会向最终用户显示任何内容
reportValidity() 返回真/假，并且还向最终用户显示验证消息（就像正常的提交按钮单击一样）

<!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>

【讨论】：

【解决方案3】：

为什么不简单地在执行 document.myForm.submit() 之前手动调用验证

您使用什么验证框架以及什么 AJAX 库？

如果你使用 jQuery，这里是防止提交的代码：

$('#myForm').submit(function(evt) {
  if (! $('#myForm').validate()) {
    evt.preventDefault();
  }
});

并通过以下方式触发提交：

$('#myForm').submit();

每当触发提交时，这将调用验证。如果验证失败，它会阻止提交执行。但我会看看你的验证框架，因为它通常应该已经这样做了

如果您不使用任何 JavaScript 框架，您可能想看看：element.checkValidity(); 以及如何在调用提交之前从 JavaScript 调用 HTML5 验证。

【讨论】：

“框架”是纯 HTML5，他想调用它的内置验证功能。
谢谢.. 我不知道验证的东西已经在浏览器中实现了.. 我用指向 MDN 的指针更新了答案
是的，正如 Xion 所说，它是纯 HTML5，有人知道我如何使用它的内置验证功能吗？？
哎呀这意味着我需要为表单中的每个输入调用 checkValidity() ?!!
我猜不是 .. 我没有使用此 API 的经验，所以我认为 checkValidity() 适用于整个表单。否则您必须遍历表单下方的 DOM。但是在无论如何，这不是一个很好的解决方案