JavaScript only validating the first field

Question

So basically I'm trying to create a list of input boxes which need to each be validated before they can be submit. I'm a very basic beginner at JavaScript and HTML and would appreciate any input as only the first form is being validated. As long as there is alphabetic characters in Forename it will submit.

  <p><b> Forename: </b></p>
  <input type="text" size="32" name="frmForename" placeholder="Dylan">

  <p><b> Surname: </b></p>
  <input type="text" size="32" name="frmSurname" placeholder="Owen">

  <p><b> Gender: </b></p>
  <input type="radio" name="frmGender" value="male"> Male
  <input type="radio" name="frmGender" value="female"> Female

  <p><b> Date of Birth:</b><p>
  <input type ="text" size="32" name="frmDateOfBirth" placeholder="DD/MM/YYYY">

  <p><b> Age: </b></p> 
  <input type ="text" size="32" name="frmAge" min="12" max="150" placeholder="Enter Your Age">

  <p><b> Course: </b></p> <select name="frmCourse" id="frmCourse">
  <option value="select">Select Your Course</option>
  <option value="databases">Databases</option>
  <option value="websites">Websites</option>
  <option value="networks">Networks</option>
  </select>

  <p><input type="submit" value="Enter Details" onclick=" return checkForm(); checkForm2();">
     <input type="reset" value="Clear Form" onclick="return confirm_reset();">
     <button onclick="goBack()">Back</button> </p>
  <font size="3" color="red">All forms <u>must</u> be complete.</font> 

  <p><b> Date Registered: </b></p>
  <input type="text" size="55" id="dateReg" readonly/>


</form>

</body>

The JavaScript

    <script language="javascript" type="text/javascript">
  document.bgColor="LightSteelBlue";
</script>


<script type="text/javascript">

  function checkForm(form)
  {

    //****FORENAME****
    // VALIDATE: No Characters
    if(form.frmForename.value == "") {
      alert("Error: Enter your forename.");
      form.frmForename.focus();
      return false;
    }

    // regular expression to match only alphanumeric characters and spaces
    var re = /^[A-Za-z]+$/;

    // VALIDATE: Does the entered text match the expression above?
    if(!re.test(form.frmForename.value)) {
      alert("Error: Cannot use numerical characters.");
      form.frmForename.focus();
      return false;
    }
    // validation was successful
    return true;
  }
  </script>

  <script>

    function checkForm2(form)
    //****SURNAME****
    if(form.frmSurname.value == "") {
      alert("Error: Enter your surname.");
      form.frmSurname.focus();
      return false;
    }

    // regular expression to match only alphanumeric characters and spaces
    var re = /^[A-Za-z]+$/;

    // VALIDATE: Does the entered text match the expression above?
    if(!re.test(form.frmSurname.value)) {
      alert("Error: Cannot use numerical characters.");
      form.frmSurname.focus();
     return false;
    }

    // validation was successful
    return true;
  }

</script>

<script>
function getDate() {
document.getElementById('dateReg').value= Date();
}
</script>


<script>
function confirm_reset() {
    return confirm("Are you sure?");
}
</script>

<script>
function goBack() {
  return confirm("Are you sure?");
  window.history.back();
}
</script>

<script>
if(form.frmDateOfBirth.value == "") {
      alert("Error: Date Of Birth is empty!");
      form.frmDateOfBirth.focus();
      return false;
    }

  re = /^(\d{1,2})/(\d{1,2})/(\d{4})$/;

    if(form.frmDateOfBirth.value != '') {
      if(regs = form.frmDateOfBirth.value.match(re)) {

        if(regs[1] < 1 || regs[1] > 31) {
          alert("Invalid value for day: " + regs[1]);
          form.frmDateOfBirth.focus();
          return false;
        }

        if(regs[2] < 1 || regs[2] > 12) {
          alert("Invalid value for month: " + regs[2]);
          form.frmDateOfBirth.focus();
          return false;
        }

        if(regs[3] < 1913 || regs[3] > (new Date()).getFullYear()) {
          alert("Invalid value for Date Of Birth: " + regs[3] + " - must be between 1913 and " + (new Date()).getFullYear());
          form.frmDateOfBirth.focus();
          return false;
        }
      } else {
        alert("Invalid date format: " + form.frmDateOfBirth.value);
        form.frmDateOfBirth.focus();
        return false;
      }
    }
</script>

<script>
function validateCourse() {

 var x = document.forms["frmCourse"]["frmCourse"].value;
     if (x == "select") {
         alert("Please select a course.");
         return false;
     }
  }
</script>

Answer 1

This line:

  onclick=" return checkForm(); checkForm2();

means that if checkForm returns false (which it does when form.frmForename.value == ""), then the false is used with the return in return checkForm() and the click event is cancelled, so the form does not submit. Then checkForm2() is called, but by then the button click has already been cancelled.

Also, there is no need to separate each function into its own <script> element. You should also be working with the form.submit event, rather than the button.click event and you should not be using inline event handlers (on...), but rather with standard element.addEventListener().