Turn any webform into multi-step wizard with jQuery
Switch branches/tags
Clone or download
artoodetoo Merge pull request #2 from kevishie/master
Replaced size() with length
Latest commit 89ba9d4 Dec 23, 2016
Permalink
Failed to load latest commit information.
examples minor changes Apr 13, 2016
LICENSE Initial commit Apr 6, 2016
README.md fix example links Apr 15, 2016
jquery.formtowizard.js Replaced size() with length Dec 22, 2016

README.md

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