Javascript表单即使无效也可以提交

Question

使用Java脚本验证申请表时，我遇到了很多问题。

我的代码现在的样子，即使有错误，它仍然允许我提交表单。 我正在尝试使用的方法是使每个函数在遇到错误时都返回false，但无法正常工作，我不确定为什么。

已修正 ，谢谢！

 "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

在您的validate函数中，在3个连续的函数调用之后，结果仍然为true 。 结果应采用以下三个函数的返回值：

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

另外，请确保在validatePostCode中返回布尔值