How to select jquery tabs if errorLable display
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'开发者_StackOverflow社区, 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>
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/
精彩评论