HTML form automatically tries to validate and doesn't wait for the submit button to be clicked

Question

I have this HTML form:

<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>

and this 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;
  }
}

When I debug it, I can see that upon entering this page on my browser, the function "validateForm()" is being called, and also called again when I click the submit button. Why is it being called upon entering?

I tried debugging it and I could see that upon entering the page, it jumps straight into validateForm and does all of the code inside of it, where instead, it should only perform the code inside of it if the user hits the submit button at the bottom of the page. I guess it registers the button from the previous stage as the submit button for some reason.

Answer 1

Use the submit event instead of the click event on the form.

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