Javascript form submits even though it is not valid

Question

I am having quite a few issues using java script to validate an application form.

The way my code is now, it still allows me to submit my form even though there are errors. The method I am trying to use is to make each function return false when it hits an error but it is not working and I am unsure why.

, thank you! ，谢谢！

 "use strict"; var errMsg = ""; /*get variables from form and check rules*/ function validate(){ var result = true; result = validateDOB() && validatePostCode() && validateTextBox() && validateJobReferenceNumber(); if (errMsg != ""){ //only display message box if there is something to show alert(errMsg); } return result; } function validateDOB(){ var dob = document.forms["regForm"]["dob"].value; var age = getAge(dob); // var error = document.getElementById("spandob"); var pattern =/^([0-9]{2})\\/([0-9]{2})\\/([0-9]{4})$/; if (dob == null || dob == "" || !pattern.test(dob) || age < 15 || age > 80) { errMsg += "Please enter a valid date of birth\\n"; return false; } else { return true; } } function getAge(dob) { /* find age from today's date minus entered DOB*/ var today = new Date(); var birthDate = new Date(dob); var age = today.getFullYear() - birthDate.getFullYear(); var m = today.getMonth() - birthDate.getMonth(); if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) { age--; } return age; } function validatePostCode(){ var postcode = document.forms["regForm"]["postcode"].value; var state = document.forms["regForm"]["state"].value; var error = document.getElementById("spanPostcode"); switch (state){ case "VIC": if (postcode.charAt(0) !== 3 || postcode.charAt(0) !== 8){ error.innerhtml = "Please enter a valid post code for VIC"; return false; } break; case "NSW": if (postcode.charAt(0) !== 1 || postcode.charAt(0) !== 2){ errMsg += "Please enter a valid post code for NSW" return false; } break; case "QLD": if (postcode.charAt(0) !== 4 || postcode.charAt(0) !== 9){ errMsg += "Please enter a valid post code for QLD" return false; } break; case "NT": if (postcode.charAt(0) !== 0){ errMsg += "Please enter a valid post code for NT" return false; } break; case "WA": if (postcode.charAt(0) !== 6){ errMsg += "Please enter a valid post code for WA" return false; } break; case "SA": if (postcode.charAt(0) !== 5){ errMsg += "Please enter a valid post code for SA" return false; } break; case "TAS": if (postcode.charAt(0) !== 7){ errMsg += "Please enter a valid post code for TAS" return false; } break; case "ACT": if (postcode.charAt(0) !== 0) { errMsg += "Please enter a valid post code for ACT" return false; } break; default: errMsg += "Please enter a valid post code"; return false; } return true; } function validateTextBox(){ var checkboxOtherSkills = document.getElementById("skills[]").getElementsByTagName("input"); var textbox = document.forms["regForm"]["otherSkills"].value; if (checkboxOtherSkills[oSkills].checked){ if (textbox.length < 1){ errMsg +="'Other Skills' has been selected but not filled out."; return false; } } return true; } function validateJobReferenceNumber(){ var refnumb = document.getElementById("jobrefno"); var pattern = (/([a-zA-Z0-9_-]){6}$/); if (!pattern.test(refnumb)){ errMsg += "6 alphanumeric characters only" return false; } return true; } function init(){ var regForm = document.getElementById("regForm");// get ref to the HTML element regForm.onsubmit = validate; } window.onload = init; 

<form id="regForm" method="post" action="http://mercury.ict.swin.edu.au/it000000/formtest.php" novalidate="novalidate">
    <fieldset><legend>Application:</legend>

    <!--Job Reference Number-->
    <p><label for="jobrefno">Job Reference Number</label>
    <input type="text" name="jobrefno" id="jobrefno" pattern="[a-zA-Z0-9]{6}" title="Must be 6 characters" required="required" /></p>
    <!--First Name-->
    <p><label for="firstName">First Name</label>
    <input type="text" name="firstName" id="firstName" pattern="[a-zA-Z]+${1,25}" maxlength="25" title="Max Length 25" required="required" /></p>
    <!--Last Name-->
    <p><label for="lastName">Last Name</label>
    <input type="text" name="lastName" id="lastName" pattern="[a-zA-Z ]+${1,25}" maxlength="25" title="Max Length 25" required="required" /></p>
    <!--Date of Birth-->
        <p><label for="dob">Date of Birth</label>
    <input type="text" name="dob" id="dob" required="required" placeholder="dd/mm/yyyy"/></p>
    <!--Gender-->
    <fieldset><legend>Gender</legend>
    <p><label>  <input type="radio" name="gender" value="Unspecified" checked="checked"/>Prefer not to say</label>
    <label><input type="radio" name="gender" value="Female" />Female</label>
    <label><input type="radio" name="gender" value="Male" />Male</label></p></fieldset> 
    <!--Street Address-->
    <p><label for="streetAddress">Street Address</label>
    <input type="text" name="streetAddress" id="streetAddress" maxlength="40" title="Max Length 40" required="required" /></p>
    <!--Suburb-->
    <p><label for="suburb">Suburb</label>
    <input type="text" name="suburb" id="suburb" maxlength="40" title="Max Length 40" required="required" /></p>
    <!--State-->    
    <p><label for="state">State</label>
    <select required ="required" name="state" id="state">
    <option value="" selected="selected">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>
    </p>
    <!--Postcode-->
    <p><label for="postcode">PostCode</label><span id="spanPostcode"></span>
    <input type="text" name="postcode" id="postcode" pattern="[0-9]{4}" maxlength="4" title="4 Digits only" required="required" />
    <!--Email address-->
    <p><label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="youremail@host.com" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" title="Please use correct format: eg. mrburns@hotmail.com" required="required" /></p>
    <!--Phone Number-->
    <p><label for="phoneNumber">Phone Number</label>
    <input type="text" name="phoneNumber" id="phoneNumber" pattern="[0-9]+{8,12}" maxlength = "12" title="8-12 Digits" required="required" />       
    </p>
    <!--Skill List-->
    <label>Skills List</label><br>
    <label><input type="checkbox" name="skills[]" value="HTML5" checked="checked" />HTML5</label><br>
    <label><input type="checkbox" name="skills[]" value="CSS" />CSS</label><br>
    <label><input type="checkbox" name="skills[]" value="JavaScript">JavaScript</label><br>
    <label><input type="checkbox" name="skills[]" value="Excel" />Excel</label><br>
    <label><input type="checkbox" name="skills[]" value="MySQL" />MySQL</label><br>
    <label><input type="checkbox" name="skills[]" value="Administration" />Administration</label><br>
    <label><input type="checkbox" name="skills[]" value="12MoExp" />12 Months Experience</label><br>
    <label><input type="checkbox" name="skills[]" id ="oSkills" value="OtherSkills" />Other Skills...</label><br>
    <!--Other Skills-->
    <p><label for="otherSkills">Other Skills</label><br>
    <textarea id="otherSkills" name="otherSkills" rows="10" cols="50" placeholder="Please tell us about any other skills you have that may benefit you in this position"></textarea></p>
    </fieldset>
    <p>
    <input type= "submit" value="Apply"/>
    <input type= "reset" value="Reset Form"/></p>
</form>

Answer 1

In your validate function, result remains true after the 3 successive function calls. result should take the return value of the 3 functions:

result = validateDOB() && validatePostCode() && validateTextBox();

Also, make sure in validatePostCode to return a boolean