Question

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

任何建议？

Answer 1

似乎在提交按钮上触发click确实会产生正确的效果：http://jsfiddle.net/e6Hf7/。

document.myForm.submitButton.click();

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

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

Answer 2

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

HTML5提供了javascript函数，无需提交按钮即可实现相同的功能。正如Tigraine指出的那样，Mozilla记录了两种有效性检查方法，用于表格＆＃39;元素：

checkValidity（）返回true / false并且不向最终用户显示任何内容
reportValidity（）返回true / false并且还向最终用户显示验证消息（如点击正常提交按钮一样）

＆＃13;

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

＆＃13;

Answer 3

为什么不在执行document.myForm.submit（）

之前手动调用验证

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

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

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

通过以下方式触发提交：

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

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

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

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

3 个答案: