Validation and jQuery Tabs

Question

Hi, I am using jQuery validation for my form validation.

The form is inside the tabs.When I get the error, I add an icon to the tab that exists to be a visual user

So far so good.

My problem is that after fixing the error, I cannot remove the error in the tab icon. I assumed that the validator is accessible through success, but it is not

Assuming the first tab (tab0) has 3 fields to check (field1, field2, field3)

Here is the complete 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 to remove an icon from all tabs immediately before checking.

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

When the test is completed again, it will replace the icon, if necessary.

Answer 2

I understand that several months have passed, but I just had to deal with this problem myself, and I believe that I came up with a good solution.

Instead of decorating the tab containing the error in invalidHandler , use highlight and unhighlight handlers instead to properly highlight or highlight the tab containing the invalid entry. Unlike invalidHandler , which is not called until an attempt is made to send (or a manual call to check it), highlight and unhighlight 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 above code for highlight and unhighlight I add and remove the corresponding errors and valid classes from the invalid element (default behavior), and then I use the (double) selector to get any <a /> that loads this element contains a div and I am adding or removing the same classes to this link. This code assumes that the contents of the tab are not loaded using AJAX, and the links that load the div have href for the div binding identifier. If your tab link configuration is different, you may have to tweak the selector a bit to suit your needs.

---

Update

After testing this, I also identified one trap that could reduce the legitimacy of the solution. Namely, this will remove the error class from the tab link, regardless of whether there are still invalid elements on this tab. Invalid items still remain selected, but the tab loses selection. I experimented with viable workarounds for this problem, and so far I have not found it. I will update this if / when I do this.

Answer 3

The following works for me. I found that #formID in the first selector of the else clause speeds up code on busy forms.

 $.validator.unobtrusive.parse(formID); if ($(formID).valid()) { ... ... } else { $("#formID #tabID").tabs("select", $("#formID .input-validation-error") .closest(".ui-tabs-panel").get(0).id); } 

Answer 4

I am struggling with the same problem, but also gave up ... IMHO the real blocker is that the jQuery check does not have an onBeforeValidate callback. This will allow you to remove all error icons before validation starts, and then allow validate () to reassign them if necessary.

Answer 5

Looking at the source, it seems that all he does when he finds out what to delete when the field becomes valid is to search for elements of the appropriate type with the correct CSS class. By default, that <label /> and "error". Therefore, I wrote additional code in my custom errorPlacement function to insert an additional label in the tab title when the field is invalid, and while I created it correctly, it deleted it for me as soon as the field is valid:

  errorPlacement: function (error, element) { $(error).appendTo($(element).closest('.form-item').find('.form-label-error')); var tabLabel = $("<label style='position: absolute; '/>") .attr("for", element.attr('id')) .addClass("error") .html("*"); $('a[href="#' + $(element).closest('.ui-tabs-panel').attr("id") + '"] .tab-errors').append(tabLabel); resizeDialog($('#popup-container')); } 

Please note that I made the position of the label absolute, so that they just sat on top of each other, and the user did not have a difference between stop 10 and one. The correct tab for labeling is calculated only by tracking the DOM tree (thanks Nathan Taylor!). Presumably, if it is not on the tab, the selector should fail. My tab definitions are as follows:

 <ul> <li><a href="#protocol-settings">Protocol<div style="display: inline-block; width:5px; height:10px; margin-left: 2px;" class="tab-errors"></div></a></li> <li><a href="#auth-settings">Authentication<div style="display: inline-block; width:5px; height:10px; margin-left: 2px;" class="tab-errors"></div></a></li> <li><a href="#trust-settings">Certificates<div style="display: inline-block; width:5px; height:10px; margin-left: 2px;" class="tab-errors"></div></a></li> </ul> 

Answer 6

I came up with a solution that, in my opinion, is pretty clean and user friendly, just focus the tab with the following error, this works as long as your inputs get a class input validation error when an error occurs, but you can change the code to find what Anyway, here's the function:

 function FocusTabWithErrors(tabPanelName) { var tabpanel = $(tabPanelName); var tabs = tabpanel.children('div').toArray(); var tabNames = Array(); for (var i = 0; i < tabs.length; i++) { tabNames[i] = "#" + tabs[i].id; } tabpanel.find(":input").each(function () { if ($(this).hasClass('input-validation-error')) { for (var z = 0; z < tabNames.length; z++) { if ($(tabNames[z]).find($(this)).length) tabpanel.tabs("select", z); } return false; // ends each } return true; }); } 

Then you just bind to the form submit event:

  $('#myForm').submit(function () { FocusTabWithErrors('#tabPanel'); }); 

Let me know your thoughts.

Answer 7

You can always get a validator instance by calling the validate () method without passing any parameters in the jquery selector where the validator was previously installed. Also note that the success callback receives one parameter pointing to the DOM label created for invalid input. So your success callback should look like this and work as expected.

 success: function(label) { var parent = label.parent(); // Or any other logic to find the parent container parent.removeClass("error"); $(parent).children("p.errorField").remove(); validator = $("form#Form1").validate(); // not sure, but $(this).validate() should also return validator //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(); } } }