Custom form validation with Bootstrap 3 Tab navigation

form-validation-bootstrap-tab.html

<form class="form" action="#some-action">
  <ul class="nav nav-tabs " role="tablist" id="tabs">
    <li role="presentation" class="active">
      <a class="Profil" href=".Profil" aria-controls="Profil" role="tab" data-toggle="tab">Profil</a>
    </li>
    <li role="presentation" class="">
       <a class="Kontak" aria-controls="Kontak" role="tab" data-toggle="tab">Kontak</a>
    </li>
    <li role="presentation" class="">
      <a class="Paspor" aria-controls="Paspor" role="tab" data-toggle="tab">Paspor</a>
    </li>
  </ul>
  
  <div class="tab-content">
    <!--  Form Profil   -->
    <div role="tabpanel" class="tab-pane active Profil" href=".Profil">
      <!--    your profil forms    -->
      <input name="nama" class="required"> <!-- 'required' class added just to notice that this is a required input -->
      <input name="phone" class="required">
      <input name="others"/>
      <button type="button" class="btn btn-default btn-secondary" id="btn-Profil">Check</button>
    </div>
    
    <!--   Form Kontak   -->
    <div role="tabpanel" class="tab-pane active Kontak" href=".Profil">
      <!--    your kontak forms    -->
      <input name="email" class="required"/>
      <input name="second_email" class="required"/>
      <select name="location">
        <option value="">choose...</option>
        <option value="location 1">location 1</option>
        <option value="location 2">location 2</option>
        <option value="location 3">location 3</option>
      </select>
      <button type="button" class="btn btn-default btn-secondary" id="btn-Kontak">Check</button>
    </div>
    
    <!--   Form Paspor   -->
    <div role="tabpanel" class="tab-pane active Paspor" href=".Profil">
      <!--    your paspor forms    -->
      <!--    since paspor form is the last one, change button type to 'submit'    -->
      <input name="paspor_number"> 
      <!-- 
       the last form won't be validated in this case, so any required input should be done in previous form. 
       this happened since the button type here is 'submit' 
       -->
      <button type="submit" class="btn btn-default btn-secondary" id="btn-Paspor">Submit</button>
    </div>
  </div>
  
</form>

function.js

/*
  This is the form validation core app, using JQuery and Bootstrap 3 libraries, 
  Any form will explicitly using this core function by defining input names that are required.
  See script.js for an example
*/
var steped = [];
function validate(arg){
  return ($('#'+arg).val() == '');
}
function validate_select(arg){
  return ($('#'+arg).prop('selectedIndex') == 0);
}
function step_with(validation, step1, step2){
  var step = $('#tabs a[href=".'+step2+'"]');
  var button = $('#btn-'+step1);
  var form = $('.'+step2);
  // console.log(step1+' ke '+ step2+ ' : '+ validation());
  if(!validation()){
    form.attr('href', '.'+ step2);
    step.tab('show');
    steped[steped.length+1] = step1;
    button.html('Selanjutnya');
  }else{
    step.removeAttr('href');
    button.html('lengkapi '+ step1 +' terlebih dahulu');
    setTimeout(function(){
      button.html('Check');
    }, 1000);
  }
}

function check_step(name){
  var exist = false;
  for(var i = 0; i < steped.length; i++){
    if(steped[i] == name){
      exist = true;
      break;
    }
  }
  return exist;
}

function step_tab(validation, step1, step2, name){
  var button = $('#btn-'+step1);
  // console.log(steped);
  if(button.text != 'Selanjutnya'){
    if(!check_step(name) && !check_step(step1)){
      setTimeout(function(){
        $('#tabs a[href=".'+step1+'"]').tab('show');
      }, 100);
    }else{
      if(name == step2){
        steped[steped.length+1] = step1;
      }
    }
  }
}

function validate_step(validation, step1, step2){
  step_with(validation, step1, step2);
  $('#btn-'+step1).click(function(){
    step_with(validation, step1, step2);
  });
  $('#tabs a').click(function(){
    step_tab(validation, step1, step2, $(this).text().replace('/\s+/g', ''));
  });
}

main.js

$(document).ready(function(){
  form_jamaah();
});

script.js

/*
  declarate required input names in each form.
  then include this file to your form page.
  just make sure this script run on first load
*/
var form = {
  'jamaah': function(){
    return validate('nama') ||
           validate('phone');
  },
  'jamaah_kontak': function(){
    return validate('email') ||
           validate('second_email') ||
           validate_select('location');
  }
};

function form_jamaah(){
  validate_step(form.jamaah, 'Profil', 'Kontak');
  validate_step(form.jamaah_kontak, 'Kontak', 'Paspor');
}

eee