使用jQuery进行多页面表单验证？

Question

我的任务是为编程练习构建一个多步骤表单，我在转换到下一页时遇到了一些麻烦，同时保持表单有效。我正在使用jQuery validate（）插件。

这是我的HTML：

var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(document).ready( function() {

    var form=$(".app-form");

    $('input,textarea').focus(function()
    {
        $(this).attr('placeholder','');

    });
    $('input,textarea').blur(function()
    {
        $(this).attr('','placeholder');

    });

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

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

            //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;
                },
            });
        });
    }
});

这是我的Javascript。我首先检查表单是否有效，然后转换到下一个字段集。虽然问题是当我点击下一个按钮时我的第二个字段集没有显示，但它只是向URL添加了一个查询字符串。感谢任何帮助。谢谢。

{{1}}