Multiple steps wizard

Tip

Use the Wizard plugin to support validating multiple steps form.

In this example, you will learn how to use FormValidation to validate a multiple steps wizard. The wizard is actually a normal form but is split into multiple steps. By default, all steps are hidden except the active one.

We can imagine that the form is structured as following:

We initialize a FormValidation instance for each step. Also, we will bring user to the next step when a step is successfully validated:

The sample code uses the built in method, FormValidation.utils.classSet, to set the CSS classes for given element.

Now, we need to validate the current step when clicking the Next button. It can be done via the validate() method:

Going to the previous step is much simple:

This example only has two steps, but we can use the same approach if your wizard has more steps. You can play with it in the demo below:

More examples