Question

如何保留默认的HTML表单验证并禁止表单提交？我尝试过使用event.preventDefault()和return false。两者都成功地阻止了表单的提交，但都失败了表单验证。我也尝试了this solution，但即使这样也行不通。

有人能帮助我吗？

Answer 1

event.preventDefault()和return false;如果在表单提交上使用，则可以正常工作。 HTML 5验证仍然存在。

＆＃13;

jQuery("form").submit(function(e){
  e.preventDefault();  
  //or
  //return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
  <input id="name" type="text" required="required" />
  <input id="email" type="email" required="required" />
  <input type="submit" id="btnSubmit" />
</form>

＆＃13;

Answer 2

我使用checkValidity()和reportValidity()解决了这个问题。

假设您的表单的ID为FORM_ID

示例代码：

function handleSubmit (e) {
  e.preventDefault(); 
  var ele = document.getElementById("FORM_ID");
  var chk_status = ele.checkValidity();
  ele.reportValidity();
  if (chk_status) {
    ...
    // do your customized submit operations here.  
  }
}

reference

阻止表单提交但保留表单验证

2 个答案: