Wizard plugin

Support validating multiple steps form

Usage

Assume that the form is split into multiple steps which can be accessed via a CSS class js-step. It also contains two buttons for jumping to the previous or next step.

Clicking the Next button will validate the current step. If all fields in the step are valid, the plugin will bring user to the next step.

The following piece of code is the starting point to use the Wizard plugin:

The Wizard plugin provides three required options:

Option Type Description
stepSelector String A CSS selector of steps
prevButton String A CSS selector of the Previous button
nextButton String A CSS selector of the Next button

Events

The Wizard plugin provides four events that you can trigger. The event handlers can be set via either plugin option

or using on() as following:

APIs

The plugin provides the following methods:

Method Description
goToNextStep() Jump to the next step. It's useful when users want to go to the next step automatically when a checkbox/radio button is chosen
goToPrevStep() Jump to the previous step

Submitting form

You cannot use the DefaultSubmit plugin to submit the form when all steps are valid. Instead, you can use the onValid option (or listen the plugins.wizard.valid event):

Basic example

Changelog

  • v1.6.0: Added new APIs to go to the previous or next steps
  • v1.5.0: Fixed a bug that the Wizard plugin doesn't work on IE 11
  • v1.3.0: First release. It means that the Wizard plugin requires FormValidation v1.3.0 or newer.