formToWizard
Turn any webform into multi-step wizard with jQuery.
Features
Every form fieldset is becoming separate "step" with forward and back buttons. It is gracefuly degrades if no script available.
History
First, it was amazing tutorial from Janko. Unfortunately it hasn't code repository and example comes without field validation.
Second, it was inherited tutorial from iFadey. As for now, breadcrumbs is optional and plugin uses Validation Engine for step validation. It is not hosted on public repo too.
I'd like to make it neat, replace hardcoded things to callbacks and options. And drop it to github with couple of examples.
Sample code
To use jQuery Validation plugin and see progress as growing color bar, do something like that:
var $signupForm = $( '#SignupForm' ); $signupForm.validate(); $signupForm.formToWizard({ submitButton: 'SaveAccount', nextBtnName: 'Forward >>', prevBtnName: '<< Previous', validateBeforeNext: function(form, step) { var stepIsValid = true; var validator = form.validate(); $(":input", step).each( function(index) { var x = validator.element(this); stepIsValid = stepIsValid && (typeof x == 'undefined' || x); }); return stepIsValid; }, progress: function (i, count) { $("#progress-complete").width(''+(i/count*100)+'%'); } });