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:

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.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.