如何验证多个步骤FORM

问题描述：

我有查询如何验证多步的形式，我创建了一个表格，并在同一个页面中的三个部分，如何验证多个步骤FORM

1。个人信息， 2.Contact信息， 3.Conformation的细节。我的问题是：

如果step1的这些特定输入都是有效的并且在#Form中返回“true”，则步骤二按钮将被激活/带你进入下一步），并且类似于步骤2 if所有特定的输入都是有效的，返回真，第三步将启动

如何当我使用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(); 
     }); 


    }); 

});

答

如果你想要做的这在浏览器中，考虑使用jQuery的精灵插件位于：http://worcesterwideweb.com/2007/06/04/jquery-wizard-plugin/

行动插件的演示可以在这里找到：http://worcesterwideweb.com/jquery/wizard/

感谢罗伯特，我已经做到了这一点同样procedeur，但我需要对每一个步骤添加验证（基本上在div标签），所以请引导我最好的方式来做到这一点。 – shahid 2010-02-22 05:46:18

那么，我个人不会在浏览器中这样做。您将需要验证服务器上的输入，因此我将提供第一页，验证并保存（大概是指数据库），然后为下一步提供一个新页面。 – 2010-02-22 15:12:52

如果您仍想在浏览器中进行验证，您可以使用jQuery Validation Plugin来执行此操作：http://bassistance.de/jquery-plugins/jquery-plugin-validation/ – 2010-02-22 15:15:33

如何验证多个步骤FORM

相关推荐