阻止表單提交但保留表單驗證

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

參考