title: Form validation on click Next Button using bootstrap nav-pill
body: <p>I am using <code>nav-pill</code> inside which there is a form and that is split up into each part say as admission details, personal details, family Details with "Next" button on each step and save button at last <code>nav-pill</code>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.btnNext').click(function() {
    $('.nav-pills &gt; .active').next('li').find('a').trigger('click');
  });
  
  $('.btnPrevious').click(function() {
    $('.nav-pills &gt; .active').prev('li').find('a').trigger('click');
  });
  
  //  Bind the event handler to the "submit" JavaScript event
  $('#validateFirst').click(function() {
  
    // Get the Login Name value and trim it
    var name = $.trim($('#admission_no').val());
  
    // Check if empty or not
    if (name === '') {
      alert('Admission No. field is empty.');
      return false;
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;ul class="nav nav-pills nav_content"&gt;
    &lt;li class="active"&gt;&lt;a data-toggle="pill" href="#admission"&gt;Admission Details&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a data-toggle="pill" href="#personal"&gt;Personal Details&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a data-toggle="pill" href="#family"&gt;Family Details&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;form id="form1" action="&lt;?php echo site_url('student/create') ?&gt;" id="employeeform" name="employeeform" method="post" accept-charset="utf-8" enctype="multipart/form-data"&gt;
    &lt;div class="tab-content"&gt;
      &lt;div id="admission" class="tab-pane fade in active"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-3"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="exampleInputEmail1"&gt;Admission Number *&lt;/label&gt;
              &lt;input id="admission_no" name="admission_no" placeholder="" type="text" class="form-control" value="admission_no" /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="exampleInputEmail1"&gt;Application Number  *&lt;/label&gt;
              &lt;input id="application_no" name="application_no" placeholder="" type="text" class="form-control" value="application_no" /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="exampleInputEmail1"&gt;Academic Year  *&lt;/label&gt;
              &lt;input id="academic_year" name="academic_year" placeholder="" type="text" class="form-control" value="academic_year" /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;a class="btn btn-primary btnNext pull-right" id="validateFirst"&gt;Next&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="personal" class="tab-pane fade"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-3"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="exampleInputEmail1"&gt;First Name *&lt;/label&gt;
              &lt;input id="firstname" name="firstname" placeholder="" type="text" class="form-control" value="firstname" /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="exampleInputEmail1"&gt;DOB *&lt;/label&gt;
              &lt;input id="dob" name="dob" placeholder="" type="text" class="form-control" value="DOB" readonly="readonly" /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="exampleInputFile"&gt;Address  *&lt;/label&gt;
              &lt;textarea id="student_address" name="student_address" placeholder="" class="form-control" rows="2"&gt;&lt;/textarea&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;a class="btn btn-primary btnPrevious pull-left"&gt;Previous&lt;/a&gt;
        &lt;a class="btn btn-primary btnNext pull-right"&gt;Next&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="family" class="tab-pane fade"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-3"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="exampleInputEmail1"&gt;Father Name *&lt;/label&gt;
              &lt;input id="father_name" name="father_name" placeholder="" type="text" class="form-control" value="father_name" /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="exampleInputEmail1"&gt;Father Occupation *&lt;/label&gt;
              &lt;input id="father_occupation" name="father_occupation" placeholder="" type="text" class="form-control" value="father_occupation" /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="exampleInputEmail1"&gt;Mother Name *&lt;/label&gt;
              &lt;input id="mother_name" name="mother_name" placeholder="" type="text" class="form-control" value="mother_name" /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;a class="btn btn-primary btnPrevious pull-left"&gt;Previous&lt;/a&gt;
        &lt;button type="submit" class="btn btn-info pull-right"&gt;Save&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have tried with button click function while clicking "Next" button like:</p>
  
  <pre><code>$('#validateFirst').click(function () {
      // Get the Login Name value and trim it
      var name = $.trim($('#admission_no').val());
      // Check if empty of not
      if (name === '') {
          alert('Text-field is empty.');
          return false;
      }
  });
  </code></pre>
  
  <p>Where button has <code>id</code> "validateFirst",</p>
  
  <pre><code>&lt;a class="btn btn-primary btnNext pull-right" id="validateFirst"&gt;Next&lt;/a&gt;
  </code></pre>
  
  <p>Here it shows <code>alert</code> when the admission no input is not filled but moves to the next tab (<em>i.e.</em>) personal details while clicking the next button. The thing i am in the need is while clicking the next button if the fields in the current <code>nav-pill</code> fields are empty (say admission no field is not filled in first nav pill) and clicking the next button, it should display alert and should not move to next <code>nav-pill</code> to rectify the invalid input fields in the current nav-pill.. I had a look around other questions but I couldn't get a clear solution. Kindly help me with a solution to resolve this issue.</p>