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:




    
    


    
...
document.addEventListener('DOMContentLoaded', function(e) { FormValidation.formValidation( document.getElementById('demoForm'), { fields: { ... }, plugins: { // The options here matches with the form above wizard: new FormValidation.plugins.Wizard({ stepSelector: '.js-step', prevButton: '#prevButton', nextButton: '#nextButton', }), ... }, } ); });

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


FormValidation.formValidation(form, {
    fields: {
        ...
    },
    plugins: {
        wizard: new FormValidation.plugins.Wizard({
            // Triggered when a step is activated
            onStepActive: function(e) {
                // e.step is the zero-based index of current step
                // e.numSteps is the number of steps
            },

            // Triggered when a step is invalid
            onStepInvalid: function(e) {
                // e.step is the zero-based index of current step
                // e.numSteps is the number of steps
            },

            // Triggered when a step is valid
            onStepValid: function(e) {
                // e.step is the zero-based index of current step
                // e.numSteps is the number of steps
            },

            // Triggered when all steps are valid
            onValid: function(e) {
                // e.numSteps is the number of steps
            },
        }),
    },
});

or using on() as following:


FormValidation
    .formValidation(form, {
        fields: {
            ...
        },
        plugins: {
            wizard: new FormValidation.plugins.Wizard({
                stepSelector: '...',
                prevButton: '...',
                nextButton: '...',
            }),
        },
    })
    .on('plugins.wizard.step.active', function(e) {
        // Same as onStepActive option
    })
    .on('plugins.wizard.step.invalid', function(e) {
        // Same as onStepInvalid option
    })
    .on('plugins.wizard.step.valid', function(e) {
        // Same as onStepValid option
    })
    .on('plugins.wizard.valid', function(e) {
        // Same as onValid option
    });

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):


FormValidation.formValidation(form, {
    fields: {
        ...
    },
    plugins: {
        wizard: new FormValidation.plugins.Wizard({
            onValid: function(e) {
                // Submit the form when all steps are valid
                form.submit();
            },
        }),
    },
});

Basic example

Changelog

  • v1.3.0: First release. It means that the Wizard plugin requires FormValidation v1.3.0 or newer.