CODEWITHSUNDEEP
jqueryvalidationtwitter-bootstrap-3
ibrahim Abdullah
ibrahim Abdullah

Reputation: 93

JQuery validation is not checking all bootstrap tabs

I'm using JQuery Validation extension and bootstrap tabs, the issue i face is JQuery Validation is not validating all tabs properly, it is only validating current open tab!!

I would really appreciate if someone can help me or at least give a hint on how to validate all tabs and jump to different tabs whenever there is an error.. this way user will easily identify required fields in others tabs not opened yet!!

i don't want to give up on Bootstrap Tabs they are very good looking and easy for use, otherwise i will have all 80 controls lined up in 1 page which is not good :(

    <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/[email protected]/dist/jquery.validate.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/additional-methods.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/additional-methods.min.js"></script>
    <script type="text/javascript">
        $("#form1").validate({
            rules: {
                myFirstName: {
                    required: true
                },
                myMobile: {
                    required: true
                }
            }
        });
</script>

Upvotes: 3

Views: 2169

Answers (1)

gaetanoM
gaetanoM

Reputation: 42044

By default validate ignores hidden fields. So you need to reset this option and, if you want to show the first tab with an error message you can add a click event handler to your submit button:

$("#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/[email protected]/dist/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/additional-methods.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 6

Related Questions