JQUERY UI - 根据验证选择选项卡

Question

我正在将一个 Jquery UI 选项卡式表单与需要验证的每个选项卡上的输入放在一起。理想情况下，我想验证当前可见的选项卡，然后选择下一个不验证的选项卡。

最好的方法是什么？我的代码如下...

<div id="tabs">
        <ul>
            <li><a href="#tab1">One</a></li>
            <li><a href="#tab2">Two</a></li>       
        </ul>
        <div id="tab1" >   
            <div>
                <ul>
                    <li>
                        <label class="uiLbl">
                            Forename</label>
                        <asp:TextBox ID="txtMainCtcForename" runat="server"  class="required"></asp:TextBox>
                    </li>
                    <li>
                        <label class="uiLbl">
                            Surname</label>
                        <asp:TextBox ID="txtMainCtcSurname" runat="server"  class="required"></asp:TextBox>
                    </li>
                    <li>
                        <label class="uiLbl">
                            Email</label>
                        <asp:TextBox ID="txtMainCtcEmail" runat="server"></asp:TextBox>
                    </li>       
                </ul>
            </div>
        </div>
        <div id="tab2" class="ui-tabs-hide">
            <div>
                <ul>
                    <li>
                        <label class="uiLbl">
                            Company Name</label>
                        <asp:TextBox ID="txtComName" runat="server"  class="required"></asp:TextBox></li>
                    <li class="blankRow">&nbsp;</li>
                    <li>
                        <label class="uiLbl">
                            Address</label>
                        <asp:TextBox ID="txtAdd1" runat="server"></asp:TextBox>
                    </li>
                    <li>
                        <label class="uiLbl">
                        </label>
                        <asp:TextBox ID="txtAdd2" runat="server"></asp:TextBox>
                    </li>
                    <li>
                        <label class="uiLbl">
                        </label>
                        <asp:TextBox ID="txtAdd3" runat="server"></asp:TextBox>
                    </li>
                    <li>
                        <label class="uiLbl">
                        </label>
                        <asp:TextBox ID="txtAdd4" runat="server"></asp:TextBox>
                    </li>
                    <li>
                        <label class="uiLbl">
                            Town</label>
                        <asp:TextBox ID="txtTwn" runat="server"></asp:TextBox>
                    </li>
                    <li>
                        <label class="uiLbl">
                            County</label>
                        <asp:TextBox ID="txtCty" runat="server"></asp:TextBox>
                    </li>
                    <li>
                        <label class="uiLbl">
                            Postcode</label>
                        <asp:TextBox ID="txtPostcode" runat="server"></asp:TextBox>
                    </li>
                </ul>
            </div>
        </div>

编辑:还有其他人有什么想法吗？在我看来，我需要......

如果当前选项卡通过验证...

1. 获取验证失败的控件
2. 识别父选项卡。
3. 切换到选项卡。

Answer 1

试试这个 http://www.position-relative.net/creation/formValidator/demos/demoMultipleForms.html并通过这种方式验证它们和显示选项卡 2 $("#tabs").tabs({ selected: 1 }); 或者您可以通过这种方式禁用选项卡 2 $(' #tabs').tabs('禁用', 1);