2016-04-29 7 views
0

Ich habe einige Probleme mit Java-Skript, um ein Antragsformular zu validieren.Javascript Formular reicht ein, obwohl es nicht gültig ist

Die Art und Weise, wie mein Code jetzt ist, erlaubt mir immer noch, mein Formular einzureichen, obwohl es Fehler gibt. Die Methode, die ich versuche, ist, dass jede Funktion false zurückgibt, wenn es einen Fehler gibt, aber es funktioniert nicht und ich bin mir nicht sicher warum.

FIXED, danke!

"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

Sie die 'result' Variable deklarieren zurück, aber Sie es nie einen Wert geben. Sie rufen verschiedene Funktionen auf, aber alle ihre Ergebnisse werden verworfen. Obendrein (und im Gegensatz zu dem, was Sie sagen) geben nicht alle Ihre Funktionen einen wahren/falschen Wert zurück. –

+0

Ich dachte, ich gab es am Anfang einen Wert? Ich weiß, dass nicht alle einen Wert zurückgeben. Wie speichere ich die Ergebnisse der Funktionsaufrufe? Ergebnis = Funktion(); ? – denpa

+0

Ja, oder in diesem Fall (vereinfacht): 'result = function1() || Funktion2() || function3(); '. Stellen Sie nur sicher, dass alle Booleans zurückgeben. –

Antwort

0

In Ihrem validate Funktion Ergebnis bleibt true nach den drei aufeinander folgenden Funktionsaufrufe. Ergebnis sollte den Rückgabewert der drei Funktionen übernehmen:

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

Stellen Sie außerdem sicher in validatePostCode einen boolean

Verwandte Themen