multiple step form validation jquery

Question

I have following multiple step form,

   <form id="msform">
        <!-- progressbar -->
        <ul id="progressbar">
            <li class="active">Account Setup</li>
            <li>Social Profiles</li>
            <li>Personal Details</li>
        </ul>
        <!-- fieldsets -->

        <fieldset id="form_1"> 
                <h2 class="fs-title">Personal Details</h2>
            <h3 class="fs-subtitle">Step 1</h3>
            <input type="text" name="firstname" placeholder="First Name" />
            <input type="text" name="lastname" placeholder="Last Name" />
            <input type="text" name="email" id="email" placeholder="Email Address" />
            <input type="button" name="next" id="next_btn1" class="next action-button" value="Next" />
        </fieldset>
        <fieldset id="form_2">
            <h2 class="fs-title">More Details</h2>
            <h3 class="fs-subtitle">Step 2</h3>
            <input type="text" name="Phone" placeholder="Phone" />
            <input type="text" id="dob" name="DOB" placeholder="Date of Birth" />
            <input type="text" name="gender" placeholder="Gender" />
            <input type="button" name="previous" class="previous action-button" value="Previous" />
            <input type="button" name="next" class="next action-button" value="Next" />
        </fieldset>
        <fieldset id="form_3">
            <h2 class="fs-title">Create Your Account</h2>
            <h3 class="fs-subtitle">Step 3</h3>
            <input type="text" name="username" id="username" placeholder="UserName" />
            <input type="password" name="password" placeholder="password" />
            <input type="password" name="passwordR" placeholder="Confirm Password" />
            <input type="button" name="previous" class="previous action-button" value="Previous" />
            <input type="submit" name="submit" class="submit action-button" value="Submit" />

                </fieldset>
    </form>

I want to add jquery validations using validation plugin to this form. If validations are valid then only can go to next step, and if go to previous step reset field values. Here is jquery code,

var current_fs, next_fs, previous_fs; 
var left, opacity, scale; 
var animating; 

$(".next").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

    //show the next fieldset
    next_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50)+"%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'transform': 'scale('+scale+')'});
            next_fs.css({'left': left, 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

$(".previous").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();

    //de-activate current step on progressbar
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

    //show the previous fieldset
    previous_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale previous_fs from 80% to 100%
            scale = 0.8 + (1 - now) * 0.2;
            //2. take current_fs to the right(50%) - from 0%
            left = ((1-now) * 50)+"%";
            //3. increase opacity of previous_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'left': left});
            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

$(".submit").click(function(){
    return false;
})

Here is demo - http://codepen.io/atakan/pen/gqbIz

Its difficult. There is a animation involve with this and complex css part also. Is there any method to do this using next button clicking event? — hogard
– hogard, Commented Feb 20, 2015 at 8:02

Matt Gildea · Accepted Answer · 2017-01-21 02:20:43Z

1

You can try this javascript project I wrote that can be found at:

https://www.npmjs.com/package/multi-step-form-js

or

https://github.com/mgildea/Multi-Step-Form-Js

All you need to do is put each form step in divs with the appropriate classes as described in the README and call the javascript function on the form object:

$(".msf:first").multiStepForm();

This will use jquery unobtrusive validation or you can pass in the validation object as a parameter to use jquery validation without the unobtrusive project.

Each step will be validated with jquery validation before moving to the next step.

answered Jan 21, 2017 at 2:20

Matt Gildea

111 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

multiple step form validation jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related