Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Apr 13, 2016
Apr 6, 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

About

Turn any webform into multi-step wizard with jQuery

Resources

License

Packages

No packages published
You can’t perform that action at this time.