Why does my JavaScript file crash without any apparent errors?-CodePudding

function validate() {
  var errMsg = "";
  var result = true;

  var fname = document.getElementById("fname").value;
   if (!fname.match(/^[a-zA-Z] $/)) {
        errMsg  = "Please enter your first name correctly.\n";
        result = false;
    }
  var lname = document.getElementById("lname").value;
    if (!lname.match(/^[a-zA-Z] $/)) {
        errMsg  = "Please enter your last name correctly.\n";
        result = false;
    }
  var email = document.getElementById("email").value;
    if (!email.match(/[a-z0-9._% -] @[a-z0-9.-] \.[a-z]{2,}$/)) {
        errMsg  = "Please enter your email correctly.\n";
        result = false;
    }
  var streetname = document.getElementById("streetname").value;
    if (!streetname.match(/^[a-zA-Z0-9\s] $/)) {
        errMsg  = "Please enter your street name correctly.\n";
        result = false;
    }
    var suburb = document.getElementById("suburb").value;
    if (!suburb.match(/^[a-zA-Z\-] $/)) {
        errMsg  = "Please enter your suburb correctly.\n";
        result = false;
    }
    var phone = document.getElementById("phone").value;
  if (!phone.match(/[0-9]{9}/)) {
        errMsg  = "Please enter your phone number correctly.\n";
        result = false;
    }


  var postcode = document.getElementById("postcode").value;
  var state = document.getElementById("state").options[
document.getElementById("state").selectedIndex
  ].text;

  var regex;
  //VIC = 3 OR 8, NSW = 1 OR 2 ,QLD = 4 OR 9 ,NT = 0 ,WA = 6 ,SA=5 ,TAS=7 ,ACT= 0.
  switch (state) {
case "Please Select":
  return false;
case "VIC":
  regex = new RegExp(/(3|8)\d /);
  break;
case "NSW":
  regex = new RegExp(/(1|2)\d /);
  break;
case "QLD":
  regex = new RegExp(/(4|9)\d /);
  break;
case "NT":
  regex = new RegExp(/0\d /);
  break;
case "WA":
  regex = new RegExp(/6\d /);
  break;
case "SA":
  regex = new RegExp(/5\d /);
  break;
case "TAS":
  regex = new RegExp(/7\d /);
  break;
case "ACT":
  regex = new RegExp(/0\d /);
  break;
  }
  if (!postcode.match(regex)) {
errMsg = errMsg   "State and postcode do not match\n";
result = false;
  }

  if (errMsg) {
alert(errMsg);
  }

  if (result) {
storeBooking(
  fname,
  lname,
  email,
  phone,
  streetname,
  suburb,
  state,
  postcode
);
  }
  return result;
}

function storeBooking(
  fname,
  lname,
  email,
  phone,
  streetname,
  suburb,
  state,
  postcode
) {
  sessionStorage.fname = fname;
  sessionStorage.lname = lname;
  sessionStorage.email = email;
  sessionStorage.phone = phone;
  sessionStorage.streetname = streetname;
  sessionStorage.suburb = suburb;
  sessionStorage.state = state;
  sessionStorage.postcode = postcode;
}



function init() {
  var regForm = document.getElementById("regform");

  regForm.onsubmit = validate;
}

window.onload = init;

window.onload = function() {
  var date = new Date();
  var dd = date.getDate();
  var mm = date.getMonth()   1;
  var yyyy = date.getFullYear();

  //Add a zero if one Digit (eg: 05,09)
  if (dd < 10) {
    dd = "0"   dd;
  }

  //Add a zero if one Digit (eg: 05,09)
  if (mm < 10) {
    mm = "0"   mm;
  }

  minYear = yyyy - 80; //Calculate Minimun Age (<80)
  maxYear = yyyy - 15; //Calculate Maximum Age (>18)

  var min = minYear   "-"   mm   "-"   dd;
  var max = maxYear   "-"   mm   "-"   dd;

  document.getElementById("start").setAttribute("min", min);
  document.getElementById("start").setAttribute("max", max);
};

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="scripts/part2.js"></script>
    <meta charset="UTF-8">
    <title>SwinTech</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body class="applypage">
    <header>
      <div class="main">
        <div class="logo">
          <img src="logo.png" alt="logo">
        </div>
        <ul>
          <li>
            <a href="index.html">Home</a>
          </li>
          <li>
            <a href="jobs.html">Jobs</a>
          </li>
          <li class="active">
            <a href="apply.html">Apply</a>
          </li>
          <li>
            <a href="about.html">About</a>
          </li>
        </ul>
      </div>
    </header>
  <section class="applything"><h2>Job application:</h2>
    <br>
    <div class="containerr">
      <form action="https://mercury.swin.edu.au/it000000/formtest.php" method="post" id="regform">


        <label>Job Reference Number</label>
        <input type="text" id="onlyletters" name="onlyletters" pattern="[a-zA-Z0-9] " minlength="5" maxlength="5" placeholder="Reference number for specified job.." required="required">
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="firstname" placeholder="Your name.." required="required" maxlength="25" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode==32)">
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lastname" placeholder="Your last name.." required="required" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode==32)">

   <label for="start">Date of birth:</label>
    <input type="date" id="start" required="required" name="trip-start" value="2021-10-02" />
        <br>
        <br>
        <label for="gender"> Select you gender</label>
        <br>
        <br>
        <select name="gender" id="gender" required="required">
          <option value="" selected>Please Select</option>
          <option value="male">Male</option>
          <option value="female">Female</option>
        </select>
        <br>
        <label for="streetname">Street Address</label>
        <input type="text" id="streetname" name="streetname" required="required" placeholder="Your street name..." maxlength="40" />
        <label for="suburb">Suburb/Town</label>
        <input type="text" id="suburb" name="suburb" required="required" placeholder="Your suburb/town..." maxlength="40">
        <label for="state">Choose a state:</label>
        <br>
        <select name="state" id="state" required="required">
          <option value="">Please Select</option>
          <option value="VIC">VIC</option>
          <option value="NSW">NSW</option>
          <option value="QLD">QLD</option>
          <option value="NT">NT</option>
          <option value="WA">WA</option>
          <option value="SA">SA</option>
          <option value="TAS">TAS</option>
          <option value="ACT">ACT</option>
        </select>
        <br>
        <br>
        <label for="postcode">Postcode</label>
        <input type="text" id="postcode" name="postcode" required="required" placeholder="Your postcode..." maxlength="4" minlength="4" pattern="^[0-9]{4}$">
        <label for="email">Email Address</label>
        <input type="text" id="email" name="emailadd" placeholder="Your email address.." required="required">
        <label for="phone">Phone Number</label>
        <input type="text" id="phone" name="phonenumb" placeholder="e.g. 0451124561" minlength="8" maxlength="12" required="required">
        <br>
        <label>Skills</label>
        <br>
        <br>
        <input type="checkbox" id="skill1" name="skill1" value="Javascript">
        <label for="skill1"> Extensive knowledge of Javascript</label>
        <br>
        <br>
        <input type="checkbox" id="skill2" name="skill2" value="Python">
        <label for="skill2"> Extensive knowledge of Python</label>
        <br>
        <br>
        <input type="checkbox" id="skill3" name="skill3" value="C#">
        <label for="skill3"> Extensive knowledge of Networking</label>
        <br>
        <br>
        <input type="checkbox" id="skill4" name="skill4" value="C#">
        <label for="skill4"> Extensive knowledge of Data storage fundamentals</label>
        <br>
        <br>
        <input type="checkbox" id="skill5" name="skill5" value="C#">
        <label for="skill5"> Extensive knowledge of Security foundations</label>
        <br>
        <br>
        <input type="checkbox" id="skill6" name="skill6" value="C#">
        <label for="skill6"> Extensive knowledge of AWS service selection</label>
        <br>
        <br>
        <input type="checkbox" id="skill7" name="skill7" value="C#">
        <label for="skill7"> Ability to work in a team</label>
        <br>
        <br>
        <input type="checkbox" id="skill8" name="skill8" value="C#">
        <label for="skill8"> 5  years experience</label>
        <br>
        <br>
        <input type="checkbox" id="skill9" name="skill9" value="C#">
        <label for="skill9"> 10  years experience</label>
        <br>
        <br>
        <input type="checkbox" id="skill10" name="skill10" value="C#">
        <label for="skill10"> 20  years experience</label>
        <br>
        <br>
        <input
    type="checkbox"
    id="other"
    name="other"
    value="other"
    onclick="otherCheckBox()"
  />
        <label for="other"> I have other skills. Please list other skills below.</label>
        <br>
        <br>
        <br>
        <label for="subject">Subject:</label>
        <textarea id="otherbox" name="subject" placeholder="textarea" style="height:200px"></textarea>
        <input type="submit" value="Apply">
      </form>
    </div>
  </section>
  <div class="footer">
    <div class="footer-content"></div>
    <div class="footer-bottom"></div> &copy; swintech.com | Designed by Bilal El-leissy
  </div>
</body>
</html>

My JavaScript crashes even though there are no apparent errors when I check the console on Chrome. I've tried rearranging and removing certain functions from the JavaScript but there doesn't seem to be a particular pattern so I cannot determine which piece of code is crashing the rest of it.

What specifically happens is that all my validation stops working except my date of birth validation.

Note: Cannot use inline JavaScript or jQuery.

CodePudding user response：

Thank You for clarifying.

The problem is with init() method.

function init() {
  var regForm = document.getElementById("regform");

  regForm.onsubmit = validate;
}

window.onload = init;

window.onload = function() {
  var date = new Date();
  var dd = date.getDate();

In this piece of code window.onload = init; You assign init function to window.onload and after that immediately reassign window.onload with function() {..}

So Your init() function is never called. Try to move init function call like this:

window.onload = function() {
  init();
  var date = new Date();
  var dd = date.getDate();
  var mm = date.getMonth()   1;
 ... }