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)+'%');
    }
});

Live examples in jsfiddle

• example 1 is Junko's: progress as step list, no validation
• example 2 is iFadey's: progress like breadcrubms, Validate Engine plugin
• example 3 is mine: progress via callback as color bar, Validation plugin