Multi Step Form with jQuery validation
Clone or download
mgildea Merge pull request #19 from os1r1s110/patch-5
Update dependencies and add package-lock.json
Latest commit 1d617b4 Jul 19, 2018


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


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

npm install multi-step-form-js


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


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.

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


<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 class="msf-content">
        <div class="msf-view">
        <div class="msf-view">
        <div class="msf-view">

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


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">
        activeIndex : 0,
        allowClickNavigation : true,    
        allowUnvalidatedStep : false,    
        hideBackButton : false,
        validate: {
            rules : {
                name : "required",
                email : {
                    required : true,
                    email : true

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

<script type="text/javascript">

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


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