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 并通过这种方式$("#tabs").tabs({ selected: 1 }); 验证它们和显示选项卡2，或者你可以通过这种方式禁用选项卡2$('#tabs').tabs('disable', 1);

Answer 2

我的解决方案是使用我找到的一个示例 here，它突出显示存在验证错误的选项卡。

 $(function () {
        $("#tabs").tabs();
    });

    $(document).ready(function () {
        $("#tabs :input").attr("disabled", true);

    });

    $("##ctl00_ContentPlaceHolder1_submitButton").button();

    $(document).ready(function () {
        $("#updateLink").click(function () {
            if ($("#updateLink").text() == 'CLICK TO EDIT') {
                $("#updateLink").text("SAVE CHANGES")
                toEditMode();
            } else {

                if ($("#aspnetForm").valid()) {
                    $("#aspnetForm").submit();
                    $("#ctl00_ContentPlaceHolder1_submitButton").click();
                    $("#updateLink").text("CLICK TO EDIT")
                    toDisplayMode();
                }
            }
        });
    });
    function toEditMode() {
        $('#tabs :input').removeAttr('disabled');
    }
    function toDisplayMode() {
        $("#tabs :input").attr("disabled", true);
    }

    $("#aspnetForm").validate({
        submitHandler: function (form) {
            alert("submitted!");
        },
        invalidHandler: function (form, validator) {
            var errors = validator.numberOfInvalids();
            if (errors) {
                var invalidPanels = $(validator.invalidElements()).closest(".ui-tabs-panel", form);
                if (invalidPanels.size() > 0) {
                    $.each($.unique(invalidPanels.get()), function () {
                        $(this).siblings(".ui-tabs-nav")
        .find("a[href='#" + this.id + "']").parent().not(".ui-tabs-selected")
          .addClass("ui-state-error")
          .show("pulsate", { times: 3 });
                    });
                }
            }
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass(errorClass);
            $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
            var $panel = $(element).closest(".ui-tabs-panel", element.form);
            if ($panel.size() > 0) {
                if ($panel.find("." + errorClass + ":visible").size() == 0) {
                    $panel.siblings(".ui-tabs-nav").find("a[href='#" + $panel[0].id + "']")
      .parent().removeClass("ui-state-error");
                }
            }
        }
    });

Answer 3

这取决于您正在实现的 jQuery 验证插件。 显然，您也应该在服务器中进行验证。

我建议你实现Jorns jQuery validation plugin（由jQuery团队成员编写）：

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

您可以在此处查看它如何与多个步骤一起工作的示例。在代码中你可以找到解决方案：

http://jquery.bassistance.de/validate/demo/multipart/

他们使用“一种自定义方法在验证时检查元素是否在当前页面上”：

    var v = $("#cmaForm").validate({
    errorClass: "warning",
    onkeyup: false,
    onblur: false,      submitHandler: function() {
        alert("Submitted, thanks!");        }   });

$.validator.addMethod("pageRequired", function(value, element) {
        var $element = $(element)
        function match(index) {
            return current == index && $(element)
.parents("#sf" + (index + 1)).length;
        }
        if (match(0) || match(1) || match(2)) {
            return !this.optional(element);
        }
        return "dependency-mismatch";
    }, $.validator.messages.required)

在“下一步”按钮的单击事件中（在您的情况下，我想是选项卡）他们使用变量“当前”跟踪当前页面。您应该将“#tab”的“#sf”部分更改为“cmaForm”表单的名称。 您应该向选项卡或按钮添加一个点击事件以从一个选项卡传递到另一个选项卡：

$("#tab1").click(function() {
          if (v.form()) {   
            current = 0;
          }
        });