jQuery breaks after validation failure on multistep form

Question

I have a 4 step form with next and previous buttons. I am using jQuery Validation to validate the form.

It validates the form when you click next, however, if you fail that step of the validation, neither next nor previous buttons work anymore.

Below is my code. Does any one have suggestions?

Javascript:

$(document).ready(function() {

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

        var type = $(this).parent().parent().attr("id");

        if(type == "business_form"){

            if($("#business_form").valid() == true){

                        $("#return-login2").hide();

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

                        //activate next step on progressbar using the index of next_fs
                        $("#progressbar li").eq($("#business_form 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;
                            }, 

                        });

            }

        }
    });

    $("body").on('click', '.previous', 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;
                }, 

            });
    });

    $("#business_form").validate({
        rules: {
            business_pass: {
                required: true,
                minlength: 5
            },
            business_cpass: {
                required: true,
                minlength: 5,
                equalTo: "#business_pass"
            },
            business_email: {
                required: true,
                email: true
            },
            business_name: {
                required: true
            },
            business_about: {
                required: true
            },
            business_website: {
                url: true
            },
            'this[]': {
                required: true
            },
            'that[]': {
                required: true
            }
        },
        messages: {
            business_pass: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            business_cpass: {
                required: "Please confirm your password",
                minlength: "Your password must be at least 5 characters long",
                equalTo: "Please enter the same password as above"
            },
            business_name: {
                required: "Please provide your company name"
            },
            business_about: {
                required: "Please provide a short blurb about your business"
            },
            business_email: "Please enter a valid email address"
        },
        submitHandler: function () {
            var pw = pw = $("#business_pass");
            var conf = conf = $("#business_cpass");
            var form = $("form#business_form");
            if(pw[0] == null){
                form.submit();
            } else {
                hashp(form[0], pw[0], conf[0]);
                return false;
            }
        },
        errorLabelContainer: '#errors3'
    });

});

HTML:

<form name="business_form" id="business_form" action="" method="post">
    <!-- progressbar -->
    <ul id="progressbar">
        <li class="active">Step 1</li>
        <li>Step 2</li>
        <li>Step 3</li>
        <li>Step 4</li>
    </ul>
    <div id="errors3" class="error"></div>
    <fieldset>
        <input type="text" name="business_email" id="business_email" placeholder="Email" />
        <input type="password" name="business_pass" id="business_pass" placeholder="Password" />
        <input type="password" name="business_cpass" id="business_cpass" placeholder="Confirm Password" />
        <a name="next" class="btn next action-button"><i class="fa fa-arrow-right"></i></a>
    </fieldset>
    <fieldset>
        <input type="text" name="business_name" id="business_name" />
        <textarea name="business_about" id="business_about"></textarea>
        <a name="next" class="btn previous action-button" id="next-who"><i class="fa fa-arrow-left"></i></a>
        <a name="next" class="btn next action-button"><i class="fa fa-arrow-right"></i></a>
    </fieldset>
    <fieldset>
        <input type="text" name="business_address" placeholder="Address" />
        <input type="text" name="business_postal" placeholder="Postal Code" />
        <input type="text" name="business_phone" placeholder="Phone Number" />
        <input type="text" name="business_website" placeholder="Website URL" />
        <div class="clear"></div>
        <a name="next" class="btn previous action-button" id="next-contact"><i class="fa fa-arrow-left"></i></a>
        <a name="next" class="btn next action-button"><i class="fa fa-arrow-right"></i></a>
    </fieldset>
    <fieldset style="padding-left:15%;">
        <div id="items">
            <div class="new-this">
              <input type="text" name="this[]" id="this-0" style="width:50%;" placeholder="Discipline" />
              <select name="that[0]" id="that-0">
                <option value="">--</option>
              </select>
              <a name="add-this" class="btn btn-d add-this" id="add">       <i class="fa fa-plus"></i></a>
            </div>
        </div>
        <div class="clear"></div>
        <a name="next" class="btn previous action-button"><i class="fa fa-arrow-left"></i></a>
        <a name="next" class="btn submit action-button" id="submit-business"><i class="fa fa-check"></i></a>
    </fieldset>
</form>

Answer 1

It is following statement that is stopping u mate.

$("body").on('click', '.next', function(){
    if(animating) return false; //try commenting this statement
    animating = true;
    //Other code
}

When you first click the next button the animating variable will be undefined .So it reinitialize the animating variable to be true .So the second time you click the next button the variable is checked against the condition.Since the variable is globally declared and the previous value being set to true ,it satisfies the condition thereby returning false and stopping you from going to the next step.Hope that gives u an idea what you might be doing wrong mate.. :)