JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<ul class="nav nav-pills nav_content">
              <li class="active"><a data-toggle="pill" href="#admission">Admission Details</a></li>
              <li><a data-toggle="pill" href="#personal">Personal Details</a></li>
              <li><a data-toggle="pill" href="#family">Family Details</a></li>
            </ul>
            
             <form id="form1" action="<?php echo site_url('student/create') ?>"  id="employeeform" name="employeeform" method="post" accept-charset="utf-8" enctype="multipart/form-data">
    <div class="tab-content">
      <div id="admission" class="tab-pane fade in active">
        <div class="row">
          <div class="col-md-3">
            <div class="form-group">
              <label for="exampleInputEmail1">Admission Number *</label>
              <input id="admission_no" name="admission_no" placeholder="" type="text" class="form-control"  value="admission_no" />
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
              <label for="exampleInputEmail1">Application Number  *</label>
              <input id="application_no" name="application_no" placeholder="" type="text" class="form-control"  value="application_no" />
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
              <label for="exampleInputEmail1">Academic Year  *</label>
              <input id="academic_year" name="academic_year" placeholder="" type="text" class="form-control"  value="academic_year" />
            </div>
          </div>
        </div>
        <a class="btn btn-primary btnNext pull-right" id="validateFirst">Next</a>
      </div>
      <div id="personal"...

JavaScript

var validationStatus = true;
  
    //  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.');
        validationStatus = false;
    }
  });
  
   
 $('.btnNext').click(function(){
 		if(validationStatus) {
    	$('.nav-pills > .active').next('li').find('a').trigger('click');
    }
    
  });

  $('.btnPrevious').click(function(){
  	if(validationStatus) {
    	    $('.nav-pills > .active').prev('li').find('a').trigger('click');
    }
  });