jQuery在多步骤表单上验证失败后中断

Question

我有一个包含下一个和上一个按钮的4步骤表单。 我正在使用jQuery Validation来验证表单。

当您单击“下一步”时，它将验证表单，但是，如果您在验证的那一步失败，则“下一步”和“上一步”按钮都不再起作用。

下面是我的代码。 有人有建议吗？

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

以下语句阻止了您的配合。

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

当你第一次点击下一步按钮的animating变量将undefined 。所以它重新初始化变量动画要 。所以第二次真正的你点击下一步按钮的变量对condition.Since变量检查globally声明和以前的值设置为true ，它满足条件，从而returning false并阻止您进行下一步。希望可以使您了解您在做错伴侣的事情.. :)