Turn any webform into multi-step wizard with jQuery.

Every form fieldset is becoming separate "step" with forward and back buttons. It is gracefuly degrades if no script available.

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.

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

• 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