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]
}

}