Skip to content

Instantly share code, notes, and snippets.

@timtutt
Created July 31, 2015 13:50
Show Gist options
  • Save timtutt/f0d847c73865a1d0c897 to your computer and use it in GitHub Desktop.
Save timtutt/f0d847c73865a1d0c897 to your computer and use it in GitHub Desktop.
bootstrap-wizard: Force HTML5 validation between steps (core in onNext and onFinish settings)
$('#bootstrap-wizard').bootstrapWizard({
'tabClass': 'nav nav-pills',
'nextSelector': '.btn-next',
'previousSelector': '.btn-previous',
'finishSelector' : '.btn-finish',
onInit : function(tab, navigation,index){
//check number of tabs and fill the entire row
var $total = navigation.find('li').length;
$width = 100/$total;
$display_width = $(document).width();
if($display_width < 400 && $total > 3){
$width = 50;
}
navigation.find('li').css('width',$width + '%');
},
onTabClick : function(tab, navigation, index){
// Disable the posibility to click on tabs
return false;
},
onTabShow: function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index+1;
var wizard = navigation.closest('.wizard-card');
// If it's the last tab then hide the last button and show the finish instead
if($current >= $total) {
$(wizard).find('.btn-next').hide();
$(wizard).find('.btn-finish').show();
} else {
$(wizard).find('.btn-next').show();
$(wizard).find('.btn-finish').hide();
}
},
onNext: function(tab, navigation, index) {
if (index == 1) {
try {
$('#step-1 *').filter(':input').each(function(){
if (!this.checkValidity()) {
this.reportValidity();
throw BreakException;
}
});
} catch (e) {
if (e!==BreakException) {
throw e;
} else {
return false;
}
}
} else if (index == 2) {
try {
$('#step-2 *').filter(':input').each(function(){
if (!this.checkValidity()) {
this.reportValidity();
throw BreakException;
}
});
} catch (e) {
if (e!==BreakException) {
throw e;
} else {
return false;
}
}
}
},
onFinish : function(tab, navigation, index) {
try {
$('#final-step *').filter(':input').each(function(){
if (!this.checkValidity()) {
this.reportValidity();
throw BreakException;
}
});
} catch (e) {
if (e!==BreakException) {
throw e;
} else {
return false;
}
}
//Now submit the form and perform additional steps. We've passed validations...
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment