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>

编辑：有没有其他人有任何想法？我看到它的方式我需要......

如果当前标签通过验证...

获取未通过验证的控件
识别父标签。
切换到标签页。

Answer 1

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

Answer 2

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

我建议您实现best 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)

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

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

Answer 3

我的解决方案是使用我发现的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");
                }
            }
        }
    });

JQUERY UI - 根据验证选择Tab

3 个答案: