2016-04-29 43 views
0

我有很多使用java脚本来验证应用程序表单的问题。即使它无效,Javascript表单也会提交

我的代码现在的样子,它仍然允许我提交表格,即使有错误。 我试图使用的方法是使每个函数在遇到错误时返回false,但它不起作用,我不确定原因。

FIXED,谢谢!

"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})$/; 
 
\t 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(){ 
 
\t var postcode = document.forms["regForm"]["postcode"].value; 
 
\t var state = document.forms["regForm"]["state"].value; 
 
\t var error = document.getElementById("spanPostcode"); 
 
\t switch (state){ 
 
\t \t case "VIC": 
 
\t \t if (postcode.charAt(0) !== 3 || postcode.charAt(0) !== 8){ 
 
\t \t \t error.innerhtml = "Please enter a valid post code for VIC"; 
 
\t \t \t return false; 
 
\t \t } 
 
\t \t break; 
 
\t \t case "NSW": 
 
\t \t if (postcode.charAt(0) !== 1 || postcode.charAt(0) !== 2){ 
 
\t \t \t errMsg += "Please enter a valid post code for NSW" 
 
\t \t \t return false; 
 
\t \t } 
 
\t \t break; 
 
\t \t case "QLD": 
 
\t \t if (postcode.charAt(0) !== 4 || postcode.charAt(0) !== 9){ 
 
\t \t \t errMsg += "Please enter a valid post code for QLD" 
 
\t \t \t return false; 
 
\t \t } 
 
\t \t break; 
 
\t \t case "NT": 
 
\t \t if (postcode.charAt(0) !== 0){ 
 
\t \t \t errMsg += "Please enter a valid post code for NT" 
 
\t \t \t return false; 
 
\t \t } 
 
\t \t break; 
 
\t \t case "WA": 
 
\t \t if (postcode.charAt(0) !== 6){ 
 
\t \t \t errMsg += "Please enter a valid post code for WA" 
 
\t \t \t return false; 
 
\t \t } 
 
\t \t break; 
 
\t \t case "SA": 
 
\t \t if (postcode.charAt(0) !== 5){ 
 
\t \t \t errMsg += "Please enter a valid post code for SA" 
 
\t \t \t return false; 
 
\t \t } 
 
\t \t break; 
 
\t \t case "TAS": 
 
\t \t if (postcode.charAt(0) !== 7){ 
 
\t \t \t errMsg += "Please enter a valid post code for TAS" 
 
\t \t \t return false; 
 
\t \t } 
 
\t \t break; 
 
\t \t case "ACT": 
 
\t \t if (postcode.charAt(0) !== 0) { 
 
\t \t \t errMsg += "Please enter a valid post code for ACT" 
 
\t \t \t return false; 
 
\t \t } 
 
\t \t break; 
 
\t \t default: 
 
\t \t errMsg += "Please enter a valid post code"; 
 
\t \t return false; 
 
\t } 
 
\t return true; 
 
} 
 

 
function validateTextBox(){ 
 
\t var checkboxOtherSkills = document.getElementById("skills[]").getElementsByTagName("input"); 
 
\t var textbox = document.forms["regForm"]["otherSkills"].value; 
 

 
\t if (checkboxOtherSkills[oSkills].checked){ 
 
\t \t if (textbox.length < 1){ 
 
\t \t \t errMsg +="'Other Skills' has been selected but not filled out."; 
 
\t \t \t return false; 
 
\t \t } 
 
\t } 
 
\t return true; 
 
} 
 

 
function validateJobReferenceNumber(){ 
 
\t var refnumb = document.getElementById("jobrefno"); 
 
\t var pattern = (/([a-zA-Z0-9_-]){6}$/); 
 

 
\t if (!pattern.test(refnumb)){ 
 
\t \t errMsg += "6 alphanumeric characters only" 
 
\t \t return false; 
 
\t } 
 
\t return true; 
 
} 
 

 
function init(){ 
 
\t var regForm = document.getElementById("regForm");// get ref to the HTML element 
 
\t 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="[email protected]" pattern="[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,4}$" title="Please use correct format: eg. [email protected]" 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> 
+1

您声明'result'变量,但你从来没有给它一个值。你可以调用各种函数,但是所有的结果都会被丢弃。除此之外(并且与你所说的相反)并不是所有的函数都返回true/false值。 –

+0

我以为我在开始时给它一个价值? 我意识到并不是所有的都会返回一个值。如何存储函数调用的结果? result = function(); ? – denpa

+0

是,或者在这种情况下(简化):'result = function1()|| function2()||功能3();'。只要确保它们都返回布尔值。 –

回答

0

在你的验证功能,结果仍是连续3个函数调用后true。 结果应该采取的3个函数的返回值:

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

此外,请务必在validatePostCode返回一个布尔

相关问题