mgildea / multi-step-form-js Goto Github PK

View Code? Open in Web Editor NEW

49.0 8.0 25.0 48 KB

Multi Step Form with jQuery validation

License: MIT License

JavaScript 54.47% CSS 9.20% HTML 36.32%

multi-step forms jquery-validation progress-bar step

multi-step-form-js's Introduction

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

multi-step-form-js's People

Contributors

Stargazers

Watchers

multi-step-form-js's Issues

Errors not displayed

Hi,
Interesting script, but error content is not displayed.

Enhancement request

Hi there, I really appreciate this little library you put up to go along the jquery unobtrusive validation.

I would have an enhancement request, it could be really nice if users could press enter in a text field and only submit the partial form they are working on instead of submitting the whole form.

I know I can simply prevent form submission by adding a listener on "enter" keydown event but I wonder if there would be a better solution.

What I do right now is I use the said event listener and block enter keydown from submitting form. I instead trigger the "next" button so it only submits the actual part I'm working on. Then on the last page I figure out there is no other msf-view section and only then I trigger the submit button.

Would you have any better idea for this behavior or do you consider it as useless/bad practice to block form submission on "enter"?

Thanks in advance for your consideration!

How to validation Second Step

How to validation Second Step and ... ?
$(".msf:second").multiStepForm({
activeIndex : 0,
hideBackButton : false,
validate: {
rules : {
name : "required",
email : {
required : true,
email : true
}
}
}
});

Radio button validation

I'm having difficulty getting the form validation to work with groups of radio buttons when hitting the next button. Any thoughts?

How to use "scroll to" first invalid input?

I tried to use the following handling:

https://stackoverflow.com/questions/9392133/when-form-is-validated-how-to-scroll-to-the-first-error-instead-of-jumping

but it didn't work at all.
Any suggestions?

Making an ajax request on next

I want to know how to save the data of every step individually. I want to save every step's form data separately for which I want to make an ajax request.

Jumping to specific step.

I want to know if we can make separate buttons to jump to a specific step. (in my example at the end of the form there should be a clickable overview separate from the steps at the top.

I have tried using the following functions:

$('.js-mfs-navigate-2').click(function() {
$('.msf:first').setActiveView(2);
});

$('.js-mfs-navigate-2').click(function(event, data) {
$.tryNavigateToView(data.currentIndex, 2);
});

Any help would be greatly appreciated.

Feature request: Multiple sets of control buttons

Someone asked me if it could be possible to add two sets of buttons for controlling the form process (next/prev buttons)

After a quick look I wondered if it could be done simply by removing the ".first()" call here

What do you think?

In need of a contributing guideline

May be useful to put up a little "contributing guideline" just to specify code formatting you prefer, etc...

If I want to push a PR, I need to reformat the code as my build pipeline automatically "beautifies" it with the settings I chose, but they might differ from yours XD

Validation Issue

Hello,

I have a problem with validation. It's validating only first rule and ignoring others...

In the example below it's validating only field with name of "first" and ignoring all others.


    $(".msf:first").multiStepForm({
        activeIndex: 0,
        allowClickNavigation: true,
        allowUnvalidatedStep: false,
        hideBackButton: false,
        validate: {
            rules: {
                first: {
                    required: true,
                    digits: true
                },
                second: {
                    required: true,
                    digits: true,
                    maxlength: 5
                },
                third: "required"
            }
        }

    });

Is it just me or there is a problem with the plugin?

Regards

Possible enhancement request: Progress notification event

Hey there, me again :)

I thought it could be nice to add an option that lets us use a progress bar along with the current icons. Then when passing to the next "page", we could simply modify the progress bar's value according to the current page we're in.

I will try to fiddle something up and maybe propose a PR if you think this could be a nice feature to have.

Another possibility could simply be to trigger an event in your js which contains the current "page" and the total page number so that anyone can use this event to modify the progress bar value as he wants....

steps issue

i have added 4 steps as per the given code but 4th step is not working

Enhancement request.

I am trying this in my form and i need to add dynamic msf-view div's at the last of the form. Is there any way to do that?

For example if user selects a button I want to add a view at the last.

Any idea how to skip a step?

Hi,
for example if I wanted to directly jump to the 3rd step in your example form here: http://www.bestjquery.com/?tLERh8Pq

Is there a way to jump to the third or Nth step of the process with a button / tag?

thanks !

any way to add logic to a step

Is there any way to add logic to a step. If a radio button is clicked, skip to a different panel other than the next panel.

AJAX submit

Hi, I'm trying to submit a form with ajax after validation, I've tried doing this:

$(".msf:first").multiStepForm({
activeIndex : 0,
allowClickNavigation : true,
allowUnvalidatedStep : false,
hideBackButton : false,
validate : {
submitHandler: function(form) {
jQuery.ajax({
url: form.action,
data: $(form).serialize(),
type: form.method,
success: function(response) {
$('.results').replaceWith(response);
}
});
return false;
}
}
});

But it doesn't appear that submitHandler is doing anything. Is this correct way to implement this or does anyone have an example how to use this with ajax calls. thanks

Radio Input

Ignore

Another enhancement request :)

Hehe, me striking again :P
I'd like to know if you would have an idea of a way to be able to click through the steps in whatever order we want. Making all the headers clickable instead of having to pass through each step in the order they are presented... ?

When I do, the script ignores any jquery-validate.

I tested this on your jsfiddle, too.

I had to resort to - $("form").validate({}) - instead.