node package manager

multi-step-form-js

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)

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.

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
validate - jQuery Validation options object, default : {}

 
<script type="text/javascript">
    $(".msf:first").multiStepForm({
        activeIndex : 0,
        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.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