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/
精彩评论