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

function checkEmpty(selector) {  	
    var isFailed = false;
    var name = $.trim($(selector).val());    
    // Check if empty or not
    if (name === '') {
        alert(selector + ' field is empty.');
        isFailed = true;
    }
    return isFailed;
  }
  
  
  function validate() {  	
    var isFailed = false;

		var listOfRequiredFields = ['#admission_no', '#application_no', '#firstname', '#father_name']; //example it should contain all, ideally you can add a class for all the required elements  and then use it or query all input type elements. This is just for illustration
    
   isFailed =  listOfRequiredFields.some(function(selector, index){
    		if($(selector).closest('.tab-pane ').hasClass('active')) {
        		return checkEmpty(selector)
        }    		
    });	
  	return isFailed;  	
  }
  
   $('.nav-pills a').on('hide.bs.tab', function(e) {
   		if(validate()){
    			e.preventDefault();
    	}
   });
 
   $('.btnNext').click(function(){
   	if(!validate()){
    	 $('.nav-pills > .active').next('li').find('a').trigger('click');
    }
   
  });

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