jQuery UI的选项卡，表单验证

Question

我有一个jQuery UI选项卡的形式，例如：

<form> 
    <div id="tabs"> 
    <ul> 
       <li>Link to fragment 1</li> 
       <li>Link to fragment 2</li> 
       <li>Link to fragment 3</span></a></li> 
       <li>Link to fragment 4</li> 
       <li>Link to fragment 5</li> 
    </ul> 

<!-- Form Fields Step 1 --> 
<div id="fragment-1" class="ui-tabs-panel"> 
    Tab 1 Form Fields 
</div>   

<!-- Form Fields Step 2 --> 
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide"> 
    Tab 2 Form Fields 
</div> 

<!-- Form Fields Step 3 --> 
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide"> 
    Tab 3 Form Fields 
</div> 
<!-- Form Fields Step 4 --> 
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide"> 
    Tab 2 Form Fields 
</div> 
<!-- Form Fields Step 5 --> 
<div id="fragment-5" class="ui-tabs-panel ui-tabs-hide"> 
    Form Summary</div> 
</div> 
</form> 

在提交时，我想确认的是将用户带到那里发生的第一个错误的特定标签。任何帮助将非常感激。 -K

Answer 1

懒惰/简单的方法是使用JavaScript来单击选项卡导航，为包含错误的选项卡。事情是这样的......

伪代码：

$('#submit').click(function(){ 
    [validation here] 
    on validate{ 
     $('input.error').closest('.tab_class').attr('id'); 
     var tab_num = get the tab number out of the id with substr 
     $('#tab_nav_button_'+tab_num).click(); [javascript clicks the tab nav, showing the correct tab] 
} 

}