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);	

 

 

About Author

Author Image
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.

Request for Proposal

Name is required

Comment is required

Sending message..