jQuery validate and tabs
- by ntan
Hi i am using jQuery validate for my form validation.
The form is inside tabs.When i get an error i add an icon to the tab that error exist to be visual by the user
So far so good.
My problem is that after correct the error i can not remove the error in tab icon.
I was assuming that validator is accessible via success but its not
Assuming that the first tab (tab0) has 3 field for validation (field1,field2,field3)
Here is the full code
$("form#Form1")
.validate({
invalidHandler: function(form, validator) {
//TAB 0
if (validator.errorMap.field1 != "" && validator.errorMap.field2 != "" && validator.errorMap.field3 != "") {
if ($("#tabs>ul>li").eq(0).find("img").length == 0) {
$("#tabs>ul>li").eq(0).prepend("<img src=\"error.gif\">");
}
}
},
errorClass: "errorField",
errorElement: "p",
errorPlacement: function(error, element) {
var parent = element.parent();
parent.addClass("error");
error.prependTo( parent );
},
//validator in not accessible via success
//so my code its not working
success: function(element,validator) {
var parent = element.parent();
parent.removeClass("error");
$(parent).children("p.errorField").remove();
//TAB 0
if (validator.errorMap.field1 == "" && validator.errorMap.field2 == "" && validator.errorMap.field2 == "") {
if ($("#tabs>ul>li").eq(0).find("img").length == 0) {
$("#tabs>ul>li").eq(0).find("img").remove();
}
}
},
rules: {
field1: { required: true },
field2: { required: true },
field3: { required: true }
}
});
Any suggestion is welcome.
