Multi-step-form-js NPM

Multi-Step-Form-Js

Multi Step Form with jQuery validation

utilizes jquery validation (with or without jquery unobtrusive validation) to validate the form at each step.
contains customizable header step classes to distinguish between active, complete, and incomplete steps.
triggers custom change events with relevant step data for custom processing (e.g. updating progress bars)
provides configuration for navigating steps by clicking headers
provides configuration for allowing navigating through steps with unvalidated form elements

Download

You can install multi-step-form-js through npm.

npm install multi-step-form-js

Demo

The following demo contains examples for listening to the 'msf:viewChanged' event to update a progress bar as well as defined header step classes to distinguish the current and completed steps and click navigation. View a jsfiddle here

Setup

The multi-step-form-js package requires: 1. use of jQuery and jQuery Validation 2. an .msf-content html element with 1 to N .msf-view html elements and uses optional: 1. jQuery Unobtrusive Validation 2. an .msf-header element with N required .msf-step elements 3. an .msf-navigation element with .msf-nav-button buttons; if buttons are not defined they will be generated

Example Html element with multi-step-form (msf) classes. As progress is made through each step the 'msf-step-active' and 'msf-step-complete' classes will be added to the element of 'msf-step' class adn the 'msf:viewChanged' event is triggered.

<head>
     <link rel="stylesheet" href="/node_modules/multi-step-form-js/css/multi-step-form.css" type="text/css">
</head>

...

<form class="msf">
    <div class="msf-header">
        <div class="row text-center">
            <div class="msf-step col-md-4"><i class="fa fa-clipboard"></i> <span>Step 1</span></div>
            <div class="msf-step col-md-4"><i class="fa fa-credit-card"></i><span>Step 2</span></div>
            <div class="msf-step col-md-4"><i class="fa fa-check"></i> <span>Step 3</span></div>
        </div>
    </div>

    <div class="msf-content">
        <div class="msf-view">
            ...
        </div>
        <div class="msf-view">
            ...
        </div>
        <div class="msf-view">
            ...
        </div>
    </div>

    <div class="msf-navigation">
        <div class="row">
            <div class="col-md-3">
                <button type="button" data-type="back" class="btn btn-outline-dark msf-nav-button"><i class="fa fa-chevron-left"></i> Back </button>
            </div>
            <div class="col-md-3 col-md-offset-6">
                <button type="button" data-type="next" class="btn  btn-outline-dark msf-nav-button">Next <i class="fa fa-chevron-right"></i></button>
                <button type="submit" data-type="submit" class="btn btn-outline-dark msf-nav-button">Submit</button>
            </div>
        </div>
    </div>
</form>

Initialize

Requires jQuery and jQuery Validation

<script src=".../path/to/jquery/jquery.min.js"></script>
<script src=".../path/to/jquery/validation/jquery.validate.min.js"></script>

can optionally use jQuery Unobtrusive Validation

<script src=".../path/to/jquery/unobtrusive/validation/jquery.validate.unobtrusive.min.js"></script>

include mulit-step-form.js

<script src="../path/to/multi-step-form-js/multi-step-form.js"></script>

Example Multi-Step-Form-Js initialization with options activeIndex - index of step to initially display, default : 0 allowClickNavigation - allows ability to click steps in header to advance form, default : false allowUnvalidatedStep - allows ability to advance in form without passing validation, default : false hideBackButton - boolean value indicating if back button should be visible after the first step, default : false validate - jQuery Validation options object, default : {}

<script type="text/javascript">
    $(".msf:first").multiStepForm({
        activeIndex : 0,
        allowClickNavigation : true,    
        allowUnvalidatedStep : false,    
        hideBackButton : false,
        validate: {
            rules : {
                name : "required",
                email : {
                    required : true,
                    email : true
                    }
                }
            }
        });
</script>

Example Multi-Step-Form-Js initialization using unobtrusive validation

<script type="text/javascript">
    $(".msf:first").multiStepForm();
</script>

Example jquery event listener to update some progress bar with object parameter containing properties: 'currentIndex', 'previousIndex', and 'totalSteps'

<script type="text/javascript">
    $(document).on("msf:viewChanged", function(event, data){
        var progress = Math.round((data.currentIndex / data.totalSteps)*100);
        $(".progress-bar").css("width", progress + "%").attr('aria-valuenow', progress);
    });

</script>

Release History

0.1.0 return form object, fix bugs in hidden view validation
0.0.13 remove default parameter values in js functions
0.0.12 configs to allow for advancing views without completed validations, click navigation in header, fixed ability to initialize start index
0.0.11 hide all views upon initialization before showing first view
0.0.10 provide option to not display back button in subsequent steps
0.0.9 trigger 'msf:viewChanged' event when displaying a new view
0.0.8 block form submit on enter if nonfinal view
0.0.6 documentation updates
0.0.4 allow parameters for non unobtrusive validation
0.0.1 Initial Release