denpa denpa - 7 months ago 48
Javascript Question

Javascript Form Validation - Date Validation, Checkbox from an array not working

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

1. The way my code is now, it still allows me to submit my form even though there are errors.
The method I am trying to use is to make each function return false when it hits an error but it is not working and I am unsure why.
FIXED, thank you!


  1. None of my validations actually work. I need to show error messages inline, so I was going to use .innerhtml to post it in a span on my html. Even with the error messages as alert, though, it still does not work

  2. validateDOB: check if the data entered is valid and if the age is between 15 and 80

  3. 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.

  4. 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) {
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

In your validate function, result remains true after the 3 successive function calls. result should take the return value of the 3 functions:

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

Also, make sure in validatePostCode to return a boolean

Comments