How focus/show a 'tab-pane' if tab field empty on bootstrap tab using jquery?

0
votes

I try to show a tab-pane in which field blank on Bootstrap tab. Here is my HTML:

<div class="container">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>

    <form method="POST" id="frmUser">
        <div class="tab-content">

            <div role="tabpanel" class="tab-pane active" id="home">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <label class="control-label">First Name</label>
                        <input type="text" name="mirst_name" class="form-control">
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="profile">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <label class="control-label">Middle Name</label>
                        <input type="text" name="middle_name" class="form-control">
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="messages">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <label class="control-label">Last Name</label>
                        <input type="text" name="last_name" class="form-control">
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="settings">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <label class="control-label">Email Address</label>
                        <input type="text" name="email" class="form-control">
                        <button type="submit" class="btn btn-primary" name="save">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

On Submit at Last tab 'Settings check all tab field not blank, if blank show the particular tab-pane.Also set 'nav-tabs'

  • to active. Any Solution?

    DEMO jsfiddle

    • 3
    javascriptjqueryhtmlcsstwitter-bootstrap

    3 Answers

    0
    votes

    complete example

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-2.1.4.min.js"></script>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap.min.css" >

<!-- Optional theme -->
<link rel="stylesheet" href="bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->

<script src="bootstrap.min.js"></script>

</head>
<body>
    <div class="container">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>

    <form method="POST" id="frmUser">
        <div class="tab-content">

            <div role="tabpanel" class="tab-pane active" id="home">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <label class="control-label">First Name</label>
                        <input type="text" name="mirst_name" class="form-control">
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="profile">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <label class="control-label">Middle Name</label>
                        <input type="text" name="middle_name" class="form-control">
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="messages">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <label class="control-label">Last Name</label>
                        <input type="text" name="last_name" class="form-control">
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="settings">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <label class="control-label">Email Address</label>
                        <input type="text" name="email" class="form-control">
                        <input type="button" class="btn btn-primary " name="save" value="submit"></button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<script>
$('input[name=save]').on('click',function(){ alert('hi');


var tabs=$('.tab-pane input');
$('.nav.nav-tabs li').removeClass('active');

$('.tab-pane').removeClass('active');

var bool=false;
var bool=$.each(tabs,function(i,v){ 

    if($(v).val().length<=0){
        $('ul.nav li:eq('+i+')').addClass('active');

        $(v).parent().parent().parent().addClass('active');

        $(this).focus();
        return false;

    }


})
if(bool=true){window.location.href='http://google.com'}

});
</script>
</body>
</html>
    0
    votes

    Script

    $('input[name=save]').on('click',function(){     

var tabs=$('.tab-pane input');
$('.nav.nav-tabs li').removeClass('active');

$('.tab-pane').removeClass('active');

var bool=false;
var bool=$.each(tabs,function(i,v){

    if($(v).val().length<=0){
        $('ul.nav li:eq('+i+')').addClass('active');

        $(v).parent().parent().parent().addClass('active');

        $(this).focus();
        return false;

    }


})
if(bool=true){window.location.href='http://google.com'}

});

    // change the button button to input in html as shown below

    html

    <input type="button" class="btn btn-primary " name="save" value="submit"></button>
    -1
    votes

    Find the below jquery script for the functionality

    $(document).on('click','button[name="save"]',function(){ 

  var tabs=$('.tab-pane input');
  $('.nav.nav-tabs li,.tab-pane').removeClass('active');


  var bool=false;
  $.each(tabs,function(index,value){ 

  if($(this).val().length<=0){
    $('ul.nav li:eq('+index+')').addClass('active');
  $('.tab-content .tab-pane:eq('+index+')').addClass('active');
   $(this).focus();
    return false;

   }

  });
  return false;


  });

    Demo link : http://jsfiddle.net/asimshahiddIT/p7n9vdon/