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

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

---

有什么建议吗？

为什么不在执行document.myForm.submit（）之前手动调用验证

您使用什么样的验证框架和什么样的AJAX库

如果使用jQuery，以下是阻止提交的代码：

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

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

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

这将在触发提交时调用验证。。如果验证失败，将阻止提交执行。 但我会看一下您的validationframework，因为它通常已经做到了这一点

---

如果您不使用任何JavaScript框架，您可能需要了解：以及如何在调用submit之前从JavaScript调用HTML5验证。

触发submit按钮上的

单击确实具有正确的效果：

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

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

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

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


checkValidity（）返回true/false，不向最终用户显示任何内容
reportValidity（）返回true/false，并向最终用户显示验证消息（与正常的“提交”按钮单击类似）



电子邮件：





这个“框架”是纯HTML5，他想调用它的内置验证功能。谢谢。。我不知道验证内容已经在浏览器中实现了。。我用一个指向MDNYes的指针更新了答案，因为Xion说它是纯HTML5。有人知道我如何使用它的内置验证功能吗？哦，这是否意味着我需要为表单中的每个输入调用checkValidity（）？！！我想不是。。我没有使用此API的经验，因此我认为checkValidity（）适用于整个表单。。否则，您必须遍历表单下的DOM。。但无论如何，这都不是一个好主意solution@Ahmed艾尔莫西：我穿的是铬合金的。你的小提琴坏了吗？我也在研究Chrome。属性submitButton为undefined@Ahmed显然，你需要命名提交按钮。在jQuery中，您也可以执行
$（'form>input[type=submit]'）。单击（）
。我没有提交按钮，我正在使用href=“javascript:document.myForm.submit（）”@Ahmed Elmorsy:您可能想要添加一个不可见的锚定。比如
。
<input type="submit" style="display:none" name="submitButton">