HTML 表单自动尝试验证并且不等待提交按钮被点击

Question

我有这个 HTML 表格：

<form onclick="return validateForm();">
<h1 style="color:whitesmoke;">Register</h1>
<h2>Please enter your details:</h2>
<br />

<input type="email" name="email" placeholder="example@email.com" />


<input type="password" name="password" placeholder="Password" />
<br />

<input type="text" name="FirstName" placeholder="First name" />

<input type="text" name="LastName" placeholder="Last name" />

<br />
<div style="position:relative; top:10px;">
    <label>Birth Date: <input type="date" id="birthday" name="DateOfBirth"></label>
</div>
<br />

<input type="number" placeholder="Age" min="10" max="120" name="age" style="width:15%;" />

<br />
<label style="position:relative; right:20px; top: 10px;">
    Gender: <input id="setD_male" type="radio" name="gender" checked>
    <label for="setD_male">Male</label>
    <input id="setD_female" type="radio" name="gender">
    <label for="setD_female">Female</label>
</label>
<br />
<div style="position:relative; top:10px;">
    <input id="checkmark" type="checkbox" /><label> I agree to the terms and regulations.</label>
</div>


</div>
<br />
<input type="hidden" name="error" value="">
<button type="submit" id="Register" name="Register" class="submit-button">Register</button>
</form>

这个 JavaScript：

var checkbox = document.getElementById("checkmark");
var button = document.getElementById("Register");
button.disabled = true;

checkbox.addEventListener("change", function () {
  button.disabled = !checkbox.checked;
});
function validateForm() {
  var error;
  var email = document.getElementsByName("email")[0].value;
  if (!email.endsWith(".com")) {
    alert("Email has to end with '.com'");
    return false;
  }
  var password = document.getElementsByName("password")[0].value;
  var FirstName = document.getElementsByName("FirstName")[0].value;
  var LastName = document.getElementsByName("LastName")[0].value;
  var DateOfBirth = document.getElementsByName("DateOfBirth")[0].value;
  var age = document.getElementsByName("age")[0].value;
  var gender = document.getElementsByName("gender")[0].value;
  if (
    email === "" ||
    password === "" ||
    FirstName === "" ||
    LastName === "" ||
    DateOfBirth === "" ||
    age === "" ||
    gender === "" ||
    email === null ||
    password === null ||
    FirstName === null ||
    LastName === null ||
    DateOfBirth === null ||
    age === null ||
    gender === null
  ) {
    error = "nullRegistration";
    window.location.href = "systemMessagesjsp.jsp?error=" + error;
    return false;
  }
  if (
    !Register(emailAddress, password, firstName, lastName, DOB, age, gender)
  ) {
    error = "CantCreateUser";
    window.location.href = "systemMessagesjsp.jsp?error=" + error;
    return false;
  } else {
    alert("successfully signed in");
    return true;
  }
}

当我调试它时，我可以看到在我的浏览器上进入这个页面时，正在调用 function “validateForm()”，并且当我点击提交按钮时也会再次调用。 为什么一进门就叫？

我尝试调试它，我可以看到在进入页面后，它直接跳转到 validateForm 并执行其中的所有代码，相反，如果用户点击提交按钮，它应该只执行其中的代码页面底部。 我猜它出于某种原因将前一阶段的按钮注册为提交按钮。

Answer 1

在表单上使用提交事件而不是单击事件。

<form onsubmit="return validateForm();">