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><linkrel="stylesheet" href="/node_modules/multi-step-form-js/css/multi-step-form.css" type="text/css"></head>
...
<formclass="msf"><divclass="msf-header"><divclass="row text-center"><divclass="msf-step col-md-4"><iclass="fa fa-clipboard"></i><span>Step 1</span></div><divclass="msf-step col-md-4"><iclass="fa fa-credit-card"></i><span>Step 2</span></div><divclass="msf-step col-md-4"><iclass="fa fa-check"></i><span>Step 3</span></div></div></div><divclass="msf-content"><divclass="msf-view">
...
</div><divclass="msf-view">
...
</div><divclass="msf-view">
...
</div></div><divclass="msf-navigation"><divclass="row"><divclass="col-md-3"><buttontype="button" data-type="back" class="btn btn-outline-dark msf-nav-button"><iclass="fa fa-chevron-left"></i> Back </button></div><divclass="col-md-3 col-md-offset-6"><buttontype="button" data-type="next" class="btn btn-outline-dark msf-nav-button">Next <iclass="fa fa-chevron-right"></i></button><buttontype="submit" data-type="submit" class="btn btn-outline-dark msf-nav-button">Submit</button></div></div></div></form>Requires jQuery and jQuery Validation
<scriptsrc=".../path/to/jquery/jquery.min.js"></script><scriptsrc=".../path/to/jquery/validation/jquery.validate.min.js"></script>can optionally use jQuery Unobtrusive Validation
<scriptsrc=".../path/to/jquery/unobtrusive/validation/jquery.validate.unobtrusive.min.js"></script>include mulit-step-form.js
<scriptsrc="../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 : {}
<scripttype="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
<scripttype="text/javascript">$(".msf:first").multiStepForm();</script>Example jquery event listener to update some progress bar with object parameter containing properties: 'currentIndex', 'previousIndex', and 'totalSteps'
<scripttype="text/javascript">$(document).on("msf:viewChanged",function(event,data){varprogress=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