Bootstrap wizard with validation
Posted By : Hema Chauhan | 29-Jun-2017
ootstrap form wizard using a formatted step structure. Bootstrap form wizard helps user in making step wizard by using navigations to go through the different wizard steps of the form and adding validation ,events to add/get events into each step individually.In this plugin user can navigate to next step only when if all the field is valid otherwise error message will show up. Add these files in your head section: jquery.min.js, bootstrap.min.js, jquery.bootstrap.wizard.js, gsdk-bootstrap-wizard.js. //basic wizard with validation
$(document).ready(function() {
$('#wizardforming').bootstrapWizard();
});
//wizard with options and events with validation.
onInit evoke when plugin is initialized.
onShow evoke when plugin data is shown.
onNext evoke when next button is clicked return false to disable moving to the next step.
onPrevious evoke when previous button is clicked return false to disable moving to the previous step.
onFirst evoke when first button is clicked return false to disable moving to the first step.
onLast evoke when last button is clicked return false to disable moving to the last step.
onBack evoke when back button is clicked return false to disable moving backwards in navigation history.
onFinish evoke when finish button is clicked (return value is irrelevant.
onTabChange evoke when a tab is changed return false to disable moving to that tab and showing its contents.
onTabClick evoke when a tab is clicked return false to disable moving to that tab and showing its contents.
onTabShow evoke when a tab content is shown return false to disable showing that tab content.
validate Check the validation of every step.
$(document).ready(function() {
var $validate = $('.wizard-cards form').validate({
rules: {
firstnaming: {
required: true,
minlength: 3
},
lastnaming: {
required: true,
minlength: 3
},
emailing: {
required: true,
minlength: 3,
}
}
});
$('.wizard-cards').bootstrapWizard({
'tabClass': 'nav nav-pills',
'nextSelector': '.btn-nexting',
'previousSelector': '.btn-previousing',
onNext: function(tab, navigation, index) {
var $validation = $('.wizard-cards form').valid();
if(!$validation) {
$validate.focusInvalid();
return false;
}
alert('next');
}
});
});
//calling a method
$('#wizardforming').bootstrapWizard('show',3);
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Hema Chauhan
Hema is a bright UI designer, having knowledge of core php, HTML, CSS. Her hobbies are interacting with people, listening to music and dancing.