jQuery validate and tabs

Question

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.

Answer 1

How about removing the icon from all tabs just before validating.

 $("form#Form1")
    .validate({
        //remove all icons here.
        //rest of your code

When the validation fails again it will replace the icon where necessary.

Answer 2

I realize it's been a few months, but I just had to handle this issue myself and I believe that I have come up with a good solution.

Rather than decorating the tab containing an error in the invalidHandler, instead use the highlight and unhighlight handlers to appropriately highlight or unhighlight the tab containing the invalid entry. Unlike invalidHandler which doesn't get called until a submission is attempted (or a manual call to validate it), highlight and unhighlight are called whenever an invalid field is processed- including onBlur.

jQuery('#Form').validate({
    highlight: function(element, errorClass, validClass) {
        $(element).addClass(errorClass).removeClass(validClass);
        $('a[href=#' + $(element).parents('.ui-tabs-panel').attr('id') + ']').addClass(errorClass).removeClass(validClass);
    },
    unhighlight: function(element, errorClass, validClass) {
        $(element).removeClass(errorClass).addClass(validClass);
        $('a[href=#' + $(element).parents('.ui-tabs-panel').attr('id') + ']').removeClass(errorClass).addClass(validClass);
    }
});

In the code above for highlight and unhighlight I add and remove the appropriate error and valid classes from the invalid element (default behavior) and then I use a (double) selector to get any <a /> that load that element's containing div and I add or remove the same classes to that tab link. This code assumes that the tab content is not loaded with AJAX and the links which load the div have an href to the div's anchor ID. If your tab link configuration differs you'll probably have to tweak the selector a little according to your needs.

---

Update

After testing this some more I have identified one pitfall, which may decrease the legitimacy of the solution. Namely, this will remove the error class from the tab link regardless of whether or not there are still invalid elements in that tab. The invalid elements still remain highlighted, but the tab loses its highlighting. I've been experimenting with viable workarounds to this issue and so far I have not found one. I'll update this if/when I do.

Answer 3

I'm fighting with the same problem, but have given up too... IMHO the real blocker is that jQuery validate has no onBeforeValidate callback. This would allow you to remove all error icons before the validation begins and then let validate() re-assign them if necessary.