Validation issue
Validation issue
Hi Folks,
I am new to JQuery and have used it for an application form. Unfortunately, the validation is not working as it should. I'm not sure exactly where I might be going wrong. The form still "submits" even though the validation has picked up on blank fields. I have pasted the coded below:
**** START OF CODE ****
<script type="text/javascript">
$(function(){
// Grab each form element
$("label[title]").each(function(){
$(this).append("<div class=\"infopop\">");
titletext = $(this).attr("title");
$(this).removeAttr("title");
$(".infopop",this).css({opacity:0}).html(titletext);
// Disable Submit button
$("#submit").attr("disabled",true);
$("#terms").click(function(){
this.checked = false;
});
$("#terms").click(function(){
if (this.checked = true) {
$("#submit").attr("disabled",false);
}
else {
$("#submit").attr("disabled",true); }
});
$("input,textarea",this).focus(function(){
// Mouseover
doFocus(this);
}).blur(function(){
// MouseOut
doBlur(this);
});
});
});
$(function submit(){
$('#formS').submit(function(){
$('input, textarea').each(function(n,element){
if ($(element).val()=='') {
alert('Please complete the field "'+element.id+'". Thank you.');
document.formS.name.focus();
return false;
}
return true;
});
});
});
function doFocus(obj) {
$(obj).addClass("active").parents("label").addClass("active").find(".infopop").animate({opacity:1,left:492},500);
}
function doBlur(obj) {
if (validate(obj)) {
isGood(obj);
}
}
function reportErr(obj, message) {
$(obj).addClass("error").parents("label").removeClass("isgood").addClass("required").addClass("error").find(".infopop").html(message).addClass("errorpop").animate({opacity:1,left:492},500);
}
function isGood(obj) {
$(obj).removeClass("error").removeClass("active").parents("label").addClass("isgood").removeClass("error").removeClass("active").find(".infopop").removeClass("errorpop").animate({opacity:0,left:513},500);
}
function validate(obj) {
// Extend jQuery object to include Regular expression masks assigned to properties
mask = jQuery.extend({textfieldmask: /^[a-z0-9\.\s-]{5,}$/i,phonemask: /^[0-9\(\)\+\.\s-]{8,}$/i, numbermask:/^[0-9\(\)\+\.\s-]{1,}$/i,passwordmask: /^\w{5,}$/,emailmask: /^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/});
// Extend jQuery object to include error messages assigned to properties
errmsg = jQuery.extend({textfielderr:"5 or more letters",phoneerr:"Include dialling code",titler:"Enter job title",companyr:"Enter company name",countyr:"Enter county",postcoder:"Enter post code",requiredr:"Enter required information",passworderr:"Minimum 5 characters",emailerr:"Invalid address",matcherr:"Must match"});
// Set up variables to hold details of which mask to use and whether the field should match another field
var masktouse = null;
var mustmatch = null;
// Determine the type of mask we're going to validate against
switch(obj.name) {
case "name": masktouse="textfieldmask"; errtouse="textfielderr"; break;
case "title": masktouse="textfieldmask"; errtouse="titler"; break;
case "email": masktouse="emailmask"; errtouse="emailerr"; break;
case "Cname": masktouse="textfieldmask"; errtouse="textfielderr"; break;
case "Ctitle": masktouse="textfieldmask"; errtouse="titler"; break;
case "company": masktouse="textfieldmask"; errtouse="companyr"; break;
case "address1": masktouse="textfieldmask"; errtouse="requiredr"; break;
case "town": masktouse="textfieldmask"; errtouse="requiredr"; break;
case "county": masktouse="textfieldmask"; errtouse="countyr"; break;
case "postcode": masktouse="textfieldmask"; errtouse="postcoder"; break;
case "phone": masktouse="phonemask"; errtouse="phoneerr"; break;
case "Cemail": masktouse="emailmask"; errtouse="emailerr"; break;
case "products": masktouse="textfieldmask"; errtouse="textfielderr"; break;
case "dates": masktouse="numbermask"; errtouse="requiredr"; break;
case "companysales": masktouse="numbermask"; errtouse="requiredr"; break;
case "exportsales": masktouse="numbermask"; errtouse="requiredr"; break;
case "employeeNo": masktouse="numbermask"; errtouse="requiredr"; break;
case "employeesEx": masktouse="numbermask"; errtouse="requiredr"; break;
case "salesaffect": masktouse="textfieldmask"; errtouse="textfielderr"; break;
case "markets1": masktouse="textfieldmask"; errtouse="textfielderr"; break;
case "markets2": masktouse="textfieldmask"; errtouse="textfielderr"; break;
case "markets3": masktouse="textfieldmask"; errtouse="textfielderr"; break;
case "achieve1": masktouse="textfieldmask"; errtouse="textfielderr"; break;
case "achieve2": masktouse="textfieldmask"; errtouse="textfielderr"; break;
case "achieve3": masktouse="textfieldmask"; errtouse="textfielderr"; break;
case "achieve4": masktouse="textfieldmask"; errtouse="textfielderr"; break;
case "support": masktouse="textfieldmask"; errtouse="requiredr"; break;
}
// Check that the element is a required field before validating against it.
if($(obj).parents("label").hasClass("required") && masktouse) {
// Set up a quick way of accessing the object we're validating
pointer = $(obj);
// Test the value of the field against the Regular Expression
if (mask[masktouse].test(pointer.val())) {
// The field validated successfully!
// Check to see if the field needs to match another field in the form
if (mustmatch) {
// It does need to match, so grab the object it needs to match
matchobj = $("#"+mustmatch);
if (matchobj.val()!='' && matchobj.val()!=pointer.val()) {
// The fields don't match, so report an error on both of them
reportErr(obj,errmsg["matcherr"]);
reportErr(matchobj,errmsg["matcherr"]);
}
else {
// Either the fields match, or the other field hasn't been completed yet
// If the other field has been completed, call the isGood function to clear any error message showing
if (matchobj.val()!='') { isGood(matchobj);}
return true;
}
}
else {
// No match is required, so return true - validation passed!
return true;
}
}
else {
// The field failed to validate against the Regular Expression
reportErr(obj,errmsg[errtouse]);
return false;
}
}
else {
// This isn't a required field, so we won't validate it against anything
return true;
}
}
</script>