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

Posted 2023-02-22

【中文标题】阻止表单提交但保留表单验证

【英文标题】：Prevent form submit but retain form validation

【发布时间】：2015-02-05 12:29:51

【问题描述】：

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

有人能帮帮我吗？

【问题讨论】：

如果您使用 react.js enter link description here***.com/questions/39809943/…

，这可能会解决您的问题

【参考方案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>

【讨论】：

请注意，从 jQuery 事件返回 false 将也调用隐式 event.stopProgagation()。对于非 jQuery 事件，它只会触发 event.preventDefault()。所以你给出的两种方法确实有不同的结果。请在此处查看：***.com/questions/1357118/…

您也可以只使用required，而不是使用required="required"。在我看来看起来更好。

preventDefault()不是有问题吗？修复任何表单验证错误后，再次按提交将不起作用？

【参考方案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

【讨论】：

但这仍然会触发默认的 html5 验证消息弹出窗口吗？

我投了反对票，因为checkValidity 和reportValidity 在preventDefault 之后不炒锅。