jQuery validate and tabs

Posted by ntan on Stack Overflow See other posts from Stack Overflow or by ntan
Published on 2010-02-24T13:26:43Z Indexed on 2010/05/25 0:01 UTC
Read the original article Hit count: 314

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.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-validate