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();">