JQuery 验证不检查所有引导选项卡

Question

我正在使用 JQuery 验证扩展和引导选项卡，我面临的问题是 JQuery 验证未正确验证所有选项卡，它仅验证当前打开的选项卡！

如果有人可以帮助我或至少给出有关如何验证所有选项卡并在出现错误时跳转到不同选项卡的提示，我将非常感激。这样用户将轻松识别其他尚未打开的选项卡中的必填字段！

我不想放弃 Bootstrap 选项卡，它们非常漂亮且易于使用，否则我将在 1 页中排列所有 80 个控件，这不太好:(

    <form id="form1" runat="server">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
                <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
                <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
            </ul>

            <div class="tab-content">
                <div id="home" class="tab-pane fade in active">
                    <div class="form-group col-md-6">
                        <asp:TextBox ID="myFirstName" class="form-control" placeholder="FirstName" runat="server"></asp:TextBox>
                    </div>
                    <div class="form-group col-md-6">
                        <asp:TextBox ID="myLastName" class="form-control" placeholder="LastName" runat="server"></asp:TextBox>
                    </div>
                </div>
                <div id="menu1" class="tab-pane fade">
                    <div class="form-group col-md-6">
                        <asp:TextBox ID="myEmail" class="form-control" placeholder="Email" runat="server"></asp:TextBox>
                    </div>
                    <div class="form-group col-md-6">
                        <asp:TextBox ID="myMobile" class="form-control" placeholder="Mobile" runat="server"></asp:TextBox>
                    </div>
                </div>
                <div id="menu2" class="tab-pane fade">
                    <div class="form-group col-md-6">
                        <asp:TextBox ID="DOB" class="form-control" placeholder="Date of Birth" runat="server"></asp:TextBox>
                    </div>
                </div>
            </div>
            <br />
            <div class="form-group col-md-6">
                <asp:Button ID="send" class="form-control" runat="server" Text="Submit" />
            </div>
    </form>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/jquery.validate.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/additional-methods.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/additional-methods.min.js"></script>
    <script type="text/javascript">
        $("#form1").validate({
            rules: {
                myFirstName: {
                    required: true
                },
                myMobile: {
                    required: true
                }
            }
        });
</script>

Answer 1

默认情况下，验证会忽略隐藏字段。因此，您需要重置此选项，如果您想显示带有错误消息的第一个选项卡，您可以向提交按钮添加单击事件处理程序：

$("#form1").validate({
    ignore: [],  // ignore NOTHING
    rules: {
        "myFirstName": {
            required: true
        },
        "myMobile": {
            required: true
        }
    }
});

$('#send').on('click', function (e) {
    $("#form1").valid();
    var ele = $("#form1 :input.error:first");
    if (ele.is(':hidden')) {
        var tabToShow = ele.closest('.tab-pane');
        $('#form1 .nav-tabs a[href="#' + tabToShow.attr('id') + '"]').tab('show');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/additional-methods.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/additional-methods.min.js"></script>




<form id="form1" runat="server">
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
        <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
        <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    </ul>

    <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
            <div class="form-group col-md-6">
                <input type="text" id="myFirstName" name="myFirstName" class="form-control" placeholder="FirstName" runat="server">
            </div>
            <div class="form-group col-md-6">
                <input type="text"  type="text"  id="myLastName" class="form-control" placeholder="LastName" runat="server">
            </div>
        </div>
        <div id="menu1" class="tab-pane fade">
            <div class="form-group col-md-6">
                <input type="text"  id="myEmail" class="form-control" placeholder="Email" runat="server">
            </div>
            <div class="form-group col-md-6">
                <input type="text"  id="myMobile" name="myMobile" class="form-control" placeholder="Mobile" runat="server">
            </div>
        </div>
        <div id="menu2" class="tab-pane fade">
            <div class="form-group col-md-6">
                <input type="text"  id="DOB" class="form-control" placeholder="Date of Birth" runat="server">
            </div>
        </div>
    </div>
    <br />
    <div class="form-group col-md-6">
        <input type="submit"  id="send" class="form-control" runat="server" value="Submit">
    </div>
</form>