Wizard

Required plugin

This feature requires the plugin files js/developr.wizard.js and css/styles/form.css

The template includes a wizard form styling:

Wizard

About you

Hello!

Please fill this form to complete your registration:

Gender
Profile
This is the name that will be displayed on profile page
Select file Max file size: 2MB
 
Contacts
Address

Preferences
If you are not sure, use HTML
Mail notifications


Use with plugin

To use the wizard with the included plugin, use this style of markup (see demo file wizard.html for the full markup):

<!-- Form element with wizard class -->
<form method="post" action="" class="block margin-bottom wizard same-height">

	<!-- Block style is optional, you can use any layout -->
	<h3 class="block-title">Wizard</h3>

	<!-- Each form step should be wrapped in a fieldset -->
	<fieldset class="wizard-fieldset fields-list">

		<!-- The legend is used to retrieve step's title - if omitted or empty, the default title is used (see defaults below)  -->
		<legend class="legend">About you</legend>

		<!-- Example input markup - optional, use any element within the fieldsets -->
		<div class="field-block button-height">
			<label for="first_name" class="label"><b>First name</b></label>
			<input type="text" name="first_name" id="first_name" value="" class="input">
		</div>

		...

	</fieldset>

	<!-- Add as many fieldsets as required -->

</form>

The plugin will handle building the indicator and navigation in steps.

Controls layout options

By default, the plugin will add an extra block at the end of each fieldset, to embed controls. If you want to have a specific layout for some steps, build your own navigation block and add the class wizard-controls to it, the plugin will automatically use it.

Full page layout

To use the wizard full-page style, see the demo file wizard.html for complete markup and centering code.

Form validation

The wizard can handle form validation for each step. Just set the form validation plugin classes (see related section) and init form validation, the wizard will take care of validating each step by itself:

$('.wizard').validationEngine();

Form validation is not enabled by default to allow custom call to the validation plugin init method.

Add/remove steps

If you add or remove a fieldset to the form, just call the method wizard() on it, it will rebuild the progress indicator and include the new steps in the process. Just note that if you add steps before the current one, this may lead to some form validation bugs.

$('.wizard').wizard();
Steps events

The plugin will also send some events to help you hook your own functions in the wizard:

$('.wizard').on('wizardchange', function()
{
	// Called everytime the active step changes
});

$('.wizard fieldset').on('wizardenter', function()
{
	// Called everytime a step (fieldset) becomes the active one
});

$('.wizard fieldset').on('wizardleave', function()
{
	// Called everytime a step (fieldset) stops being the active one
});

Note: the wizardleave event will always be called before the wizardenter event

The wizardleave event receive a special object wizard with 3 elements to help identify what's going on:

For instance, if you want to perform different operations depending on if the wizard is going forward or backward:

$('fieldset').on('wizardleave', function(event)
{
	if (event.wizard.forward)
	{
    	...
	}
	else
	{
		...
	}
});

Use without plugin

If you want to use the wizard style above, but without the plugin (for instance, is you process steps server-side), use the same markup as above, replace the class wizard by wizard-enabled on the form (fieldsets have a special style when JS is disabled, this class removes it) and add the progress indicator below:

<ul class="wizard-steps">
	<li class="completed"><span class="wizard-step">1</span> Completed</li>
	<li class="active"><span class="wizard-step">2</span> Active</li>
	<li><span class="wizard-step">3</span> Locked</li>
</ul>

Methods

$(selector).wizard(options)

Convert a form into a wizard (to be called on a fieldset or on any element inside it)

Parameters

@var object options - optional (see defaults for a complete list)

$.fn.showWizardStep(force)

Show a specific step of a wizard (to be called on a fieldset or on any element inside it)

Parameters

@param boolean force true to force display even if step is not unlocked yet (optional, default: false)

$.fn.showWizardPrevStep(force)

Show the previous step of a wizard (to be called on the form)

Parameters

@param boolean force true to force display even if step is not unlocked yet (optional, default: false)

$.fn.showWizardNextStep(force)

Show the next step of a wizard (to be called on the form)

Parameters

@param boolean force true to force display even if step is not unlocked yet (optional, default: false)

$.fn.markWizardStepAsComplete()

Mark a step as completed (to be called on a fieldset or on any element inside it)

$.fn.markWizardStepAsCurrent()

Set a step as current (to be called on a fieldset or on any element inside it)

$.fn.lockWizard

Lock the wizard, for instance during AJAX validation

$.fn.isWizardLocked

Test if a wizard is locked, returns true or false

$.fn.unlockWizard

Unlock a wizard

Options reference

The defaults may be modified at runtime in $.fn.wizard.defaults
defaultTitle
Default title for fieldsets without legend (use % as a placeholder for step's number)
Type: string
Default: 'Step %'
controlsWrapper
Structure for navigation buttons. Will be ignored for steps with a .wizard-controls block.
Type: string
Default: '<div class="field-block button-height wizard-controls clearfix"></div>'
controlPrev
Previous button markup - must use class 'wizard-prev'
Type: string
Default: '<button type="button" class="button glossy mid-margin-right wizard-previous float-left"><span class="button-icon anthracite-gradient"><span class="icon-backward"></span></span>Back</button>'
controlNext
Next button markup - must use class 'wizard-next'
Type: string
Default: '<button type="button" class="button glossy mid-margin-right wizard-next float-right">Next<span class="button-icon right-side"><span class="icon-forward"></span></span></button>'