Trigger ASP.Net Validators on Tab change event of BootStrap Tabs

Last Reply on May 15, 2015 07:02 AM By Mudassar

Posted on May 15, 2015 04:24 AM

Button in One tabs prevent the second button click operation  as the first tab required field error is popped up....Kindly please provide the solution

Posted on May 15, 2015 07:02 AM

You will need to make use of jQuery and call Validations using JavaScript.

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="panel panel-default" style="width: 500px; padding: 10px; margin: 10px">
    <div id="Tabs" role="tabpanel">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li><a href="#personal" role="tab" >Personal
            </a></li>
            <li><a href="#employment" role="tab" >Employment</a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content" style="padding-top: 20px">
            <div role="tabpanel" class="tab-pane active" id="personal">
                    <div class="form-group">
                    Name:
                    <asp:TextBox ID="txtName" runat="server" CssClass="form-control" Width="150" placeholder="Enter name" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ErrorMessage="Required" ControlToValidate="txtName" runat="server"
                        ForeColor="Red" />
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="employment">
                This is Employment Information Tab
            </div>
        </div>
    </div>
    <asp:Button ID="Button1" Text="Submit" runat="server" CssClass="btn btn-primary" />
    <asp:HiddenField ID="TabName" runat="server" />
</div>
<script type="text/javascript">
    $(function () {
        var tabName = "personal";
        $('#Tabs a[href="#' + tabName + '"]').tab('show');
        $("#Tabs a").click(function () {
            $('#Tabs a[href="#personal"]').tab('show');
            tabName = $(this).attr("href").replace("#", "");
            if (Page_ClientValidate()) {
                $('#Tabs a[href="#' + tabName + '"]').tab('show');
            }
        });
    });
</script>

Screenshot