vendredi 29 avril 2016

Javascript Form Validation - Checkbox from an array, first digit of input

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

  1. validatePostCode: take the value from a selection box and depending on what is chosen, check if the first value of the post code matches the set validation. I tried .charAt(0) but it still displays an error message even if it is correct.

  2. validateTextBox: if the "otherskills" checkbox is checked, the text box cannot be empty. as you can see in my html, my checkbox uses arrays but I don't know to get the value of only "otherskills"

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) {
        error.textContent = "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.textContent = "Please enter a valid post code for VIC";
                        return false;
                }
                break;
                case "NSW":
                if (postcode.charAt(0) !== 1 || postcode.charAt(0) !== 2){
                        error.textContent = "Please enter a valid post code for NSW"
                        return false;
                }
                break;
                case "QLD":
                if (postcode.charAt(0) !== 4 || postcode.charAt(0) !== 9){
                        error.textContent = "Please enter a valid post code for QLD"
                        return false;
                }
                break;
                case "NT":
                if (postcode.charAt(0) !== 0){
                        error.textContent = "Please enter a valid post code for NT"
                        return false;
                }
                break;
                case "WA":
                if (postcode.charAt(0) !== 6){
                        error.textContent = "Please enter a valid post code for WA"
                        return false;
                }
                break;
                case "SA":
                if (postcode.charAt(0) !== 5){
                        error.textContent = "Please enter a valid post code for SA"
                        return false;
                }
                break;
                case "TAS":
                if (postcode.charAt(0) !== 7){
                        error.textContent = "Please enter a valid post code for TAS"
                        return false;
                }
                break;
                case "ACT":
                if (postcode.charAt(0) !== 0) {
                        error.textContent = "Please enter a valid post code for ACT"
                        return false;
                }
                break;
                default: 
                error.textContent = "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://ift.tt/1rGQD7h" 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" /><span id="spanJobRefNo"></span></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" /><span id="spanFirstName"></span></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" /><span id="spanLastName"></span></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"/><span id="spanDob"></span></p>
        <!--Gender-->
        <fieldset><legend>Gender</legend></span>
        <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>
        <span id="spanGender"></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" /><span id="spanStreetAddress"></span></p>
        <!--Suburb-->
        <p><label for="suburb">Suburb</label>
        <input type="text" name="suburb" id="suburb" maxlength="40" title="Max Length 40" required="required" /><span id="spanSuburb"></span></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>
        <span id="spanState"></span>
        </p>
        <!--Postcode-->
        <p><label for="postcode">PostCode</label>
        <input type="text" name="postcode" id="postcode" pattern="[0-9]{4}" maxlength="4" title="4 Digits only" required="required" /><span id="spanPostcode"></span>
        <!--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" /><span id="spanEmail"></span></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" /><span id="spanPhoneNumber"></span>           
        </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> <span id="spanOtherSkills"></span><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>



Aucun commentaire:

Enregistrer un commentaire