2016-04-29 2 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() || function3(); '. Просто убедитесь, что все они возвращают логические значения. –

ответ

0

В функции валидации, результат остается true после последовательных вызовов функций 3. результат должен принять значение, возвращаемое из 3 функций:

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

Кроме того, убедитесь, что в validatePostCode возвращать булево

Смежные вопросы