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为包含错误的选项卡单击tab nav。就像这样..。

psuedo代码：

$('#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]
}

}