Question

im up to apply jquery UI tabs to my application and im going to apply jquery validation class on that. my problem is if i got error in some div that div should selected and display the error to user when click on the save button .

i tried

 $('#tabs > div').each(function(i){
                   if($('.errortd', this).not(':hidden').length>0){
                                $("#tabs").tabs('select', i);                                              

                      });

               });

But i have no luck any help thanks lot

my tabs div

    <div id="tabs">
           <ul>
            <li><a href="#editEmployeeDIV"><?php echo __("View/Edit employees") ?></a></li>
            <li><a href="#addEmployeeDIV"><?php echo __("Assign new employees") ?></a></li>
           </ul>
    <div id="editEmployeeDIV">
    </div>
    <div id="editEmployeeDIV">
    </div> 
</div>

my error lables having class errortd

<label for="txtAmount_146" generated="true" class="errortd" style="display: none; ">This field is required.</label>

Answer 1

You have a few problems.

The first is a stray ); in your code:

if($('.errortd', this).not(':hidden').length>0){
    $("#tabs").tabs('select', i);                                              
}); // <------ Right here

Then you’re using :hidden when you shouldn’t be. From the fine manual:

Elements can be considered hidden for several reasons:
[…]

• An ancestor element is hidden, so the element is not shown on the page.

That means that the <label> will always be considered hidden if it is in a non-current tab.

You could do something like this:

var $shown = $(this).find('.errortd').filter(function() {
    var dpy = $(this).css('display');
    return !dpy || dpy != 'none';
});
if($shown.length > 0)
    $("#tabs").tabs('select', i);

Demo: http://jsfiddle.net/ambiguous/agrCe/

Or, add a class to the <label> elements that hides them instead of manually hiding them. You have a bit of CSS like this:

.no-error {
    display: none;
}

And then:

if($(this).find('.errortd:not(.no-error)').length > 0)
    $("#tabs").tabs('select', i);

Demo: http://jsfiddle.net/ambiguous/Z4D2A/