JQUERY UI - 根据验证选择Tab [英] JQUERY UI - Select Tab based on validation

问题描述

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

I'm putting together a Jquery UI Tabbed form with inputs on each tab that require validation. Ideally I would like to validate the currently visible tab and then select the next tab that does not validate.

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

What would be the best way to do this? My code is as follows...

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

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

Does anyone else have any ideas? The way I see it I need to...

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

If the current tab passes validation...

1. 获取未通过验证的控件


2. 识别父选项卡。


3. 切换到选项卡。

推荐答案

我的解决方案是使用我发现的一个例子此处突出显示有验证错误的标签。

My solution was to use an example I found here which highlights tabs that have validation errors.

 $(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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！