Skip to content

Instantly share code, notes, and snippets.

@vianhanif
Last active November 30, 2022 07:35
Show Gist options
  • Save vianhanif/06eec7de01aca34c28e956483d5e40ce to your computer and use it in GitHub Desktop.
Save vianhanif/06eec7de01aca34c28e956483d5e40ce to your computer and use it in GitHub Desktop.
Custom form validation with Bootstrap 3 Tab navigation
<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>
/*
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', ''));
});
}
$(document).ready(function(){
form_jamaah();
});
/*
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');
}
@Sreyroth-khoem
Copy link

eee

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment