如何停止表单提交？答案

【问题标题】：How to stop form submission?如何停止表单提交？
【发布时间】：2022-02-12 18:53:14
【问题描述】：

我是 JavaScript 新手。如果任何验证条件返回 false，我需要阻止表单提交。

例如：-

if((document.getElementById("name").value)==""){
    alert("'Name' field can not be empty");
    return false;
}

我试过<form onsubmit="return validate();"> 和<form onsubmit="event.preventDefault(); validate();">。这些都没有帮助。第一个提示相同的警报消息两次。第二个不断提示所有警报消息。我想要的是，

如果有一个错误条件，我需要浏览器停止提交表单并提示相关的警报信息。
如果有多个错误条件，我需要浏览器停止提交表单，只提示一条警告消息。

有没有办法通过使用 JavaScript（无 JavaScript 库）来实现这一点？

对不起，如果有任何语法错误，英语不是我的第一语言:(

【问题讨论】：

这可能对你有帮助 link

标签： javascript html forms events

【解决方案1】：

您需要调用事件对象的 preventDefault 作为您从 EventListener 的回调函数中获得的参数。像这样：

...
<head>
<script>
window.addEventListener("load",init);
function init()
  {document.getElementById("form").addEventListener("submit",function(e)
     {e.preventDefault();});}
</script>
</head>
<body>
<form id="form">
  <input type="submit">
</form>
</body>
...

您可以调用任何参数，也可以在其他地方定义该函数。

...
<script>
window.addEventListener("load",init);
function init()
  {document.getElementById("form").addEventListener("submit",handleSubmit);}
function handleSubmit(event)
  {event.preventDefault();}
</script>
...

【讨论】：

成功了。谢谢你:)