Question

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

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

我不想放弃Bootstrap选项卡，它们非常漂亮且易于使用，否则我将把所有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

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

$("#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>

jQuery验证未检查所有引导程序选项卡

1 个答案: