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

我有一个带有下一步和上一步按钮的4步表单。我使用jQuery验证来验证表单

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

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

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:

步骤1
步骤2
步骤3
步骤4

--

以下语句正在停止u mate

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

---

当您第一次单击“下一步”按钮时，

动画

变量将是

未定义的

。因此它将动画变量重新初始化为true。因此，第二次单击“下一步”按钮时，将根据条件检查变量。因为变量是

全局

声明的，并且上一个值是设置为

true

，它满足条件，从而

返回false

并阻止您进入下一步。希望这能让您了解您可能做错了什么，伙计：）

.validate（）

方法中没有禁用任何按钮的内容。你能构造一个显示这个问题的JSFIDLE吗？不确定。验证正在工作，在任何情况下我都无法切换选项卡。这当然很奇怪。如果您在第一次尝试时输入了有效的电子邮件、密码和确认密码，它将允许您转到下一个选项卡。。。这就是它应该做的。但是，如果您导致验证错误，即使已修复错误，它也不允许您继续。。。这就是问题所在。我现在没有时间（或足够的睡眠）深入研究它。。。但似乎是

if.valid（）

部分中的代码激活了按钮。但是，我可以确认

.validate（）

方法中没有任何内容正在停用您的按钮。好的，谢谢。我会继续玩的。

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