如何验证多步骤表单

Question

我已经询问了如何验证多步骤表单，我创建了一个表单，它在同一页面中有三个部分，

1.个人信息，2.联系信息，3.确认细节我的问题是：

如果step1的这些特定输入都是有效的，并且在#表单中返回“true”，则第二步按钮将被激活，类似地，对于第二步，如果所有特定输入都是有效的并且返回true，则step3将被激活

如何在使用jquery验证时分步验证表单

我的代码如下：

$(document).ready(function() { 
var navHTML = '' + ''; $(function(){ 

        // init  
        $('#Form > div')  
            .hide()  
            .append(navHTML);  
        $('#first-step .prev-als').remove();  
        $('#last-step .form-next').remove();  

        // show first step  
        $('#first-step').show();  
$("a.form-next").click(function() { 

    var whichStep = $(this).parent().parent().attr('id');  



            if( whichStep == 'first-step' )  
            {  


      $("#first-step").validate();  
                if($("#form").valid()==false)  return false;      
//Dont navigate to second page  

            }  
            else if( whichStep == 'second-step' )  

            {                     

            }  

            else if( whichStep == 'last-step' )  
            {  
                // validate last-step  
            }  
$(this).parent().parent().hide().next().show(); }); 

$('a.prev-als ').click(function(){  
            $(this).parent().parent().hide().prev().show();  
        });  


    });  

});  

Answer 1

如果要在浏览器中执行此操作，请考虑使用位于以下位置的jQuery向导插件：http://worcesterwideweb.com/2007/06/04/jquery-wizard-plugin/

可以在此处找到该插件的实际运行演示：http://worcesterwideweb.com/jquery/wizard/