Javascript 表单 onsubmit 总是在刷新时运行答案

【问题标题】：Javascript form onsubmit always runs on refreshJavascript 表单 onsubmit 总是在刷新时运行
【发布时间】：2020-10-11 22:53:14
【问题描述】：

我在提交表单时遇到问题 - 不知何故，当用户没有单击提交按钮时，在刷新页面时，会运行验证并在页面上显示错误消息。

任何人都知道为什么 onsubmit 在这里不起作用，我如何只在表单提交时显示错误？

HTML：

 <form action="#" method="POST" name="signupForm" class="ggForm" onsubmit="return validateSignupForm()">
   
<div class="email">
  <label for="emailBox">Email*:</label>
  <input type="email" name="custEmail" id="emailBox" placeholder="john.doe@gmail.com" required
pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" title="(The email entered is invalid)">
                </div>
   
   <!-- submit button below -->
   <div>
     <input type="submit" value="Submit Form">
   </div>

   <p id="potentialErrors"></p>
</form>

JS：

window.onload = init;

function init() {
  document.forms["signupForm"].onsubmit = validateSignupForm();
}

function validateSignupForm() {
    console.log("ran");
    var errMsg = "";

    var email = document.forms["signupForm"]["custEmail"].value;
    if (email == "") {
        errMsg += "<br>Email must be filled out";
    }

    // when there's errors in any field, put as message below submit button
    if (errMsg != "") {
        document.getElementById("potentialErrors").innerHTML = errMsg;

        //change the error message css
        $("p#potentialErrors").css("height","50"); 
        $("p#potentialErrors").attr("width","500"); 
        $("p#potentialErrors").css("font-weight","bold");
        $("p#potentialErrors").css("color","red"); 

        return false;
    }
    return true;
}

编辑仅供参考：我已将上述代码编辑到此代码笔中，它现在正在工作： https://codepen.io/vadevalor/pen/VwepxdY

需要添加jquery库，
需要移除 html 验证
根据本题的cmets，需要把js函数中的()去掉

【问题讨论】：

.onsubmit = validateSignupForm() 执行validateSignupForm 并将其返回值分配给.onsubmit。删除() -> .onsubmit = validateSignupForm
我认为应该是这样的：document.forms["signupForm"].onsubmit = validateSignupForm;
不要以内容与其标题不匹配的方式更改问题。如果由于评论而发生更改，则 ping 该评论的作者，以便他/她可以对该更改做出反应（例如，通过删除关闭/否决票）
@Andreas 和 Jon 感谢两位。注意到这一点，我不会改变这个问题。现在的问题是当我删除（）时没有显示错误消息，你知道为什么吗？是因为 html 验证吗？我都需要吗？
我解决了！谢谢大家:)

标签： javascript html jquery validation

【解决方案1】：

您需要以event.preventDefault(); 的形式添加onsubmit，然后将jquery 库添加到您的代码中。

所以：

<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
<form action="#" method="POST" name="signupForm" class="ggForm" onsubmit="event.preventDefault(); return validateSignupForm()">

【讨论】：

谢谢！我解决了它 - jquery 是 css 没有显示的原因，但更重要的是它的 html 验证和使用 () 调用函数。