Untitled

<!DOCTYPE html>
<html>
<head>
 <script>
  function validateForm() {
  var firstname = document.forms["myForm"]["firstname"].value;
  var lastname = document.forms["myForm"]["lastname"].value;
    //var gender = document.forms["myForm"]["gender"].value;
  var age = document.forms["myForm"]["age"].value;
  var dobFilled = false;      // this is a flag for later on in the date checking process

    if (firstname == "") {
    alert("First name must be filled out.");
    setCaretPosition(boxfirstname, 0)
    return false;
    } else if (lastname == "") {
    alert("Last name must be filled out.");
    setCaretPosition(boxlastname, 0)
    return false;
    } else if (isNaN(age)) {
    alert("Age must be a number.");
    setCaretPosition(boxage, 0)
    return false;
    } else if (age == "") {
    alert("Age must be filled out.");
    setCaretPosition(boxage, 0)
    return false;
    } else if (age > 150) {
    alert("You are too old.");
    setCaretPosition(boxage, 0)
    return false;
    } else if (age < 12) {
    alert("You are too young.");
    setCaretPosition(boxage, 0)
    return false;
     }
     dobFilled = agetest();            // gets a value from the function
     console.log(dobFilled);
     if (dobFilled == true){           // function should return false if user error occurs, instead
     alert("Submission successful.");  // this alert does not fire, problem with function?
     }
  }
  function required(inputtx)
   {
     if (inputtx.value.length == 0) {
         alert("Birthdate must be filled out.");
         return false;
      }
      return true;
    }

  function setCaretPosition(ctrl, pos) {
  if (ctrl.setSelectionRange) {
    ctrl.focus();
    ctrl.setSelectionRange(pos, pos);
    }
   }
   function agetest(){                    //have tested this function independently of the final webpage. seems to work???
        var ageInMS = 0
        var ageEstimate = 0
        var ageInput = document.getElementById('boxage').value

        var birthdate = document.getElementById('birthdate').value
        var dateRegis = document.getElementById('datereg').value
        console.log(ageInput, birthdate, dateRegis) //the most useful function
        var birthdateInMS = Date.parse(birthdate)
        var dateRegisInMS = Date.parse(dateRegis)
        console.log(birthdateInMS, dateRegisInMS)
        ageInMS = (dateRegisInMS - birthdateInMS)
        ageEstimate = parseInt(Math.floor(ageInMS/31536000000))
        console.log(ageInMS, ageEstimate)
        if (ageEstimate == ageInput){
            return true;
        }
        else{
            alert("At least one date is incorrectly filled in.");
            setCaretPosition(boxage, 0)
            return false;
        }
      }
 </script>
</head>

<body>

<h1>PORTFOLIO 1</h1>
<form name="myForm" onsubmit="return validateForm()" method="post"> <!-- action="successfulsubmissionwebpage.html"> add a separate page called the quotes in the same folder as file. -->
  First name:<br>
  <input type="text" id="boxfirstname" name="firstname"><br>
  Last name:<br>
  <input type="text" id="boxlastname" name="lastname"><br><br>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other<br><br>
  Age: <br>
  <input type="text" id ="boxage" name="age" size="2" value=""><br><br>
  Date of Birth: <br>
  <input type="date" id="birthdate" size="2"><br>
  Date Registered: <br>
  <input type="date" id="datereg" size="2"> <br>
  <br><br>
  Course:<br>
  <select name="course">
    <option value="databases">Databases</option>
    <option value="websites">Websites</option>
    <option value="networks">Networks</option>
  </select>
  <br><br>

  <input type="submit" value="Submit">
</form>
<p>This is a paragraph.</p>

</body>
</html>