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

Question

如何在保留默认 HTML 表单验证的同时禁止表单提交？ 我曾尝试使用event.preventDefault()并return false 。 两者都成功阻止了表单提交，但都在表单验证中失败。 我也试过这个解决方案，但即使这样也不起作用。

有人可以帮助我吗？

Answer 1

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

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

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

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.  
  }
}

参考