I've a jQuery validation script to check all form fields for a valid value and prevent form submission and display an error message if any fields fail. It was requested that the validation script not check fields one by one, but that it check and highlight ALL fields that failed validation. It works perfectly. But I am more a front-end person, than a real developer and even though it works I feel like it's twice as long as it needs to be.
I've tried to combine logic where I could but it still feels like I have a ton of if/else statements and it just doesn't seem very...well...elegant.
A little more background: The script is used by three different forms which each have a different number of fields (form 1 has only email, form 2 has email and country, form 3 has email, country, and gender). The script checks for a form ID before bothering to validate any fields that aren't there.
$("#footer_newsletter").submit(function(){
var hasValue = true;
var validEmail = true;
// validate email
if($.trim($("#newsletter_email").val()) == ""){
$("#newsletter_email").addClass("error");
hasValue = false;
}else{
$("#newsletter_email").removeClass("error");
}if(!$("#newsletter_email").val().match(/^[A-Z0-9._%-]+@[A-Z0-9.-]+\.([A-Z]{2,4})$/i)){
$("#newsletter_email").addClass("error");
validEmail = false;
}else{
$("#newsletter_email").removeClass("error");
}
if(parseInt($("#newsletter_form_id").val()) > 0){
// validate country
if($("#newsletter_country").prop("selectedIndex") == 0){
$("#newsletter_country").addClass("error");
hasValue = false;
}else{
$("#newsletter_country").removeClass("error");
}
}
if(parseInt($("#newsletter_form_id").val()) > 1){
// validate gender
if($(".email_signup_form_wrapper :radio:checked").val() == undefined){
$("#newsletter_gender").addClass("error");
hasValue = false;
}else{
$("#newsletter_gender").removeClass("error");
}
}
if(!validEmail && !hasValue){
$("#error_required_field").show();
return false;
}else if(!validEmail && hasValue){
$("#error_valid_email").show();
$("#error_required_field").hide();
return false;
}else if(validEmail && !hasValue){
$("#error_required_field").show();
$("#error_valid_email").hide();
return false;
}else if(validEmail && hasValue){
$("#error_valid_email").hide();
$("#error_required_field").hide();
$("#newsletter_submit").hide();
$("#newsletter_sending").show();
$.ajax({ type: "get", url: $("#footer_newsletter").attr("action"), data: $("#footer_newsletter").serialize(), dataType: "script" });
return false;
}
My basic thinking behind the script is this:
In all fields I have to check for a value, and in the email field I have to check for a VALID value so I create two variables at the top of the script to record whether a field has a value, and whether or not that value is valid if it's the email field.
Look at each field and test it's value. If it fails add a class of "error", otherwise remove the class "error".
Then, if any of the following are true: The form has empty fields and does not have a valid email address, or the form has all fields filled out but does not have a valid email address, or the form has a valid email address but not all fields are filled out then display the appropriate error message.
Otherwise, everything looks good so submit the form.
Here is a fiddle where you can see it in action. For simplicity I've removed the submission bit and the command to show the loading graphic.