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