Form Validation help

[White_Lily]

Hi I have written a custom script to validate a form that I am using, the problem I am having is that i have written the code so that classes are applied at particular stages of the validation depending on what the user is editing.

 

The code:

 

<script type="text/javascript">
$(function(){
var $submit = $("div.submitBtn input");
var $required = $(".required");
var $userLength = $("#usernameLength input").val().length;
function containsBlanks(){
var blanks = $required.map(function(){
return $(this).val() == "";
});
return $.inArray(true,blanks) != -1;
}

function isValidEmail(email){
return email.indexOf("@") != -1;
}

function requiredFields(){
if(containsBlanks()
|| $("#usernameLength input").val().length < 6
|| $("#usernameLength input").val().length > 30/* || !isValidEmail($("#email").val())*/)
$submit.attr("disabled","disabled");
else
$submit.removeAttr("disabled");
}

$("#registerOverlay span").hide();
$("#signIn").click(function(){
$("div.popOverlay").fadeIn("slow");
$("div#registerOverlay").fadeIn("slow");
});
$("div.popOverlay").click(function(){
$(this).fadeOut("slow");
$("div#registerOverlay").fadeOut("slow");
});
$("#registerOverlay input").focus(function(){
$(this).next().fadeIn("slow");
}).blur(function(){
$(this).next().fadeOut("slow");
}).keyup(function(){
// check all required fields
requiredFields();
});

$("#usernameLength input").keyup(function(){
//check string length of username
if($("#usernameLength input").val().length < 6)
$("#usernameLength span").removeClass("pass").addClass("error");
else if($("#usernameLength input").val().length > 30)
$("#usernameLength span").removeClass("pass").addClass("error");
else
$("#usernameLength span").removeClass("error").addClass("pass");
});

/*$("#email").keyup(function(){
// check for valid email
if(isValidEmail($(this).val()))
$(this).next().removeClass("error").addClass("pass");
else
$(this).next().removeClass("pass").addClass("error");
});*/

requiredFields();
});
</script>

 

The actual problem that I am having is that the addClass for the usernameLength span isnt working, well its applying the class, just not the styles, im not entirely sure why so I guessed it had something to do with this jQuery script. If you have any suggestions its much appreciated :-)

[White_Lily]

I have solved this, the classes were conflicting with eachother, so i had to set validation styles as element styles rather than class styles.