title: Display alert message when user clicks on the second tab before filling the required information in the first tab
body: <p>There are two tabs named as 'First tab' and 'Second tab'.In the first tab the 'first name' is the required field and in the second tab 'email' is the required field.When the user tries to click the second tab instead of filling the required field in the first tab an alert message should be displayed and should not be allowed to enter the second tab unless he fills the required information in the first tab and similar for the second tab.</p>
  
  <p>here is the  code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Bootstrap Case&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="parsley.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
      var validate_form = function (form) {
          if (true === form.parsley().isValid()){
              $('.bs-callout-info').removeClass('hidden');
              $('.bs-callout-warning').addClass('hidden');
              var link = $('#mytabs .active').next().children('a').attr('href');
              $('#mytabs a[href="' + link + '"]').tab('show');
              return true;
          } else {
              $('.bs-callout-info').addClass('hidden');
              $('.bs-callout-warning').removeClass('hidden');
              return false;
          }
      };
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="" role="tabpanel" data-example-id="togglable-tabs"&gt;
  
          &lt;ul class="nav nav-tabs bar_tabs tabs" role="tablist" id="mytabs"&gt;
            &lt;li role="presentation"&gt;
                &lt;a href="#first" id="li_first_tab" role="tab" data-toggle="tab"&gt;First tab&lt;/a&gt;
            &lt;/li&gt;
            &lt;li role="presentation"&gt;
              &lt;a href="#second" id="li_second_tab" role="tab" data-toggle="tab"&gt;Second tab&lt;/a&gt;
            &lt;/li&gt;
  
          &lt;/ul&gt;
          &lt;div id="myTabContent" class="tab-content"&gt;
              &lt;div class="tab-pane fade active in " id="first"&gt;
                  &lt;form id="tab_form" enctype="multipart/form-data" method="POST" data-parsley-validate class="form-horizontal form-label-left"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="first_name" class="control-label col-md-12 col-sm-12 col-xs-12"&gt;First Name&lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;
                          &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt;
                              &lt;input required="required" id="first_name" class="form-control col-md-7 col-xs-12" type="text" name="first_name" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="last_name" class="control-label col-md-12 col-sm-12 col-xs-12"&gt;Last Name&lt;/label&gt;
                          &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt;
                              &lt;input  id="last_name" class="form-control col-md-7 col-xs-12" type="text" name="last_name" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3"&gt;
                              &lt;input type="button" name="editBtn" value="Save" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;  
              &lt;div class="tab-pane fade" id="second"&gt;
                  &lt;form id="tab_form" enctype="multipart/form-data" method="POST" data-parsley-validate class="form-horizontal form-label-left" &gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="email" class="control-label col-md-12 col-sm-12 col-xs-12"&gt;Email&lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;
                          &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt;
                              &lt;input required="required" id="email" class="form-control col-md-7 col-xs-12" type="text" name="email" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="pnone" class="control-label col-md-12 col-sm-12 col-xs-12"&gt;Phone&lt;/label&gt;
                          &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt;
                              &lt;input  id="phone" class="form-control col-md-7 col-xs-12" type="text" name="phone" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3"&gt;
                              &lt;input type="button" name="editBtn" value="Save" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>