Menu
I have been trying to create some client side validation for my form in my web page but it just does not seem to work. can anyone help please?
Here is the javascript I have used:
<script type=”text/javascript”>
function validateFormOnSubmit(theForm) {
var reason = “”;
reason += validateFirst_Name(theForm.first_name);
reason += validateSurname(theForm.surname);
reason += validateEmail(theForm.email);
reason += validateSchool(theForm.school);
reason += validateAddress(theForm.address);
reason += validateTown(theForm.town);
reason += validatePostcode(theForm.postcode);
reason += validateNumber(theForm.number);
if (reason != “”) {
alert(“Some fields need correction:n” + reason);
return false;
}
alert(“All fields are filled correctly”);
return false;
}
function validateFirst_name(fld) {
var error = “”;
var illegalChars = /[W_]/;
if (fld.value == “”) {
fld.style.background = ‘Yellow’;
error = “You didn’t enter your first name.n”;
} else if ((fld.value.length < 2) || (fld.value.length > 20)) {
fld.style.background = ‘Yellow’;
error = “The first name is the wrong length.n”;
} else if (illegalChars.test(fld.value)) {
fld.style.background = ‘Yellow’;
error = “Your first name contains illegal characters.n”;
} else {
fld.style.background = ‘White’;
}
return error;
}
function validateSurname(fld) {
var error = “”;
var illegalChars = /[W_]/;
if (fld.value == “”) {
fld.style.background = ‘Yellow’;
error = “You didn’t enter your surname.n”;
} else if ((fld.value.length < 2) || (fld.value.length > 20)) {
fld.style.background = ‘Yellow’;
error = “The surname is the wrong length.n”;
} else if (illegalChars.test(fld.value)) {
fld.style.background = ‘Yellow’;
error = “Your surname contains illegal characters.n”;
} else {
fld.style.background = ‘White’;
}
return error;
}
function trim(s)
{
return s.replace(/^s+|s+$/, ”);
}
function validateEmail(fld) {
var error=””;
var tfld = trim(fld.value);
var emailFilter = /^[^@]+@[^@.]+.^@]*ww$/ ;
var illegalChars= /[()<>:[]
if (fld.value == “”) {
fld.style.background = ‘Yellow’;
error = “You didn’t enter an email address.n”;
} else if (!emailFilter.test(tfld)) {
fld.style.background = ‘Yellow’;
error = “Please enter a valid email address.n”;
} else if (fld.value.match(illegalChars)) {
fld.style.background = ‘Yellow’;
error = “The email address contains illegal characters.n”;
} else {
fld.style.background = ‘White’;
}
return error;
}
function validateSchool(fld) {
var error = “”;
var illegalChars = /[W_]/;
if (fld.value == “”) {
fld.style.background = ‘Yellow’;
error = “You didn’t enter your school.n”;
} else if ((fld.value.length < 2) || (fld.value.length > 50)) {
fld.style.background = ‘Yellow’;
error = “The school you entered is the wrong length.n”;
} else if (illegalChars.test(fld.value)) {
fld.style.background = ‘Yellow’;
error = “Your school contains illegal characters.n”;
} else {
fld.style.background = ‘White’;
}
return error;
}
function validateAddress(fld) {
var error = “”;
var illegalChars = /[W_]/;
if (fld.value == “”) {
fld.style.background = ‘Yellow’;
error = “You didn’t enter your school address.n”;
} else if ((fld.value.length < 4) || (fld.value.length > 60)) {
fld.style.background = ‘Yellow’;
error = “The address is the wrong length.n”;
} else if (illegalChars.test(fld.value)) {
fld.style.background = ‘Yellow’;
error = “Your address contains illegal characters.n”;
} else {
fld.style.background = ‘White’;
}
return error;
}
function validateTown(fld) {
var error = “”;
var illegalChars = /[W_]/;
if (fld.value == “”) {
fld.style.background = ‘Yellow’;
error = “You didn’t enter your town.n”;
} else if ((fld.value.length < 2) || (fld.value.length > 20)) {
fld.style.background = ‘Yellow’;
error = “The town is the wrong length.n”;
} else if (illegalChars.test(fld.value)) {
fld.style.background = ‘Yellow’;
error = “Your town contains illegal characters.n”;
} else {
fld.style.background = ‘White’;
}
return error;
}
function validatePostcode(fld) {
var error = “”;
var illegalChars = /[W_]/;
if (fld.value == “”) {
fld.style.background = ‘Yellow’;
error = “You didn’t enter your postcode.n”;
} else if ((fld.value.length < 6) || (fld.value.length > 8)) {
fld.style.background = ‘Yellow’;
error = “The postcode is the wrong length.n”;
} else if (illegalChars.test(fld.value)) {
fld.style.background = ‘Yellow’;
error = “Your postcode contains illegal characters.n”;
} else {
fld.style.background = ‘White’;
}
return error;
}
function validateNumber(fld) {
var error = “”;
var stripped = fld.value.replace(/[().–
if (fld.value == “”) {
error = “You didn’t enter a phone number.n”;
fld.style.background = ‘Yellow’;
} else if (isNaN(parseInt(stripped))) {
error = “The phone number contains illegal characters.n”;
fld.style.background = ‘Yellow’;
} else if (!(stripped.length == 10)) {
error = “The phone number is the wrong length. Make sure you included an area code.n”;
fld.style.background = ‘Yellow’;
}
return error;
}
</script>
and here is my form:
<form name=”booking” onsubmit=”return validateFormOnSubmit(this)” action=”addbooking.php” method=”post”>
<label><span>First Name</span>
<input type=”text” name=”first_name” id=”first_name” class=”input-text”/>
</label>
<label><span>Surname</span>
<input type=”text” name=”surname” id=”surname” class=”input-text”/>
</label>
<label><span>Email</span>
<input type=”text” name=”email” id=”email” class=”input-text”/>
</label>
<label><span>School</span>
<input type=”text” name=”school” id=”school” class=”input-text”/>
</label>
<label><span>Address</span>
<input type=”text” name=”address” id=”address” class=”input-text”/>
</label>
<label><span>Town</span>
<input type=”text” name=”town” id=”town” class=”input-text”/>
</label>
<label><span>Postcode</span>
<input type=”text” name=”postcode” id=”postcode” class=”input-text”/>
</label>
<label><span>Contact Number</span>
<input type=”text” name=”number” id=”number” class=”input-text”/>
</label>
<label><span>Preferred Date of Workshop</span>
<input type=”text” name=”date” id=”date” class=”input-text”/>
</label>
<label><span>Notes</span>
<textarea name=”notes” id=”notes” cols=”35″ rows=”10″></textarea>
</label>
<div class=”spacer”><input type=”submit” value=”Send” class=”green”></div>
</form>