jQuery：验证首先隐藏的字段

Question

好的，这对我来说很难解释，但我会尽我所能。

我有已分成3个独立步骤，以使其更易于为用户处理数据的单一形式。感谢jQuery，我很容易通过在dom中隐藏和显示元素来做到这一点，但也正因为如此，jQuery在验证最初隐藏的数据时遇到了麻烦。

请看看下面的表格：http://jsfiddle.net/Egyhc/

<form> 
    <div id="step1" style="display: block;"> 
    <label for="first_name">First Name</label> 
    <input type="text" value="" name="first_name" id="FirstName"/> 

    <label for="last_name">Last Name</label> 
    <input type="text" value="" name="last_name" id="LastName"/> 
    </div> 


    <div id="step2" style="display: none;"> 
    <label for="first_name">Address</label> 
    <input type="text" value="" name="address" id="Address"/> 
    </div> 

    <a href="#" id="step1_btn">Continue to step 2</a> 
    <input type="submit" id="submit_btn" value="Verstuur" style="display: none;" /> 
</form> 


$(function() { 
    $('#step1_btn').click(function() { 
    $('#step1, #step1_btn').hide(); 
    $('#step2, #submit_btn').show();   
    }); 
});​ 

正如你所看到的，这是一个相当简单的形式，但是当我添加验证，只有第一个“台阶”的工作原理。第二步没有得到验证。

下面你可以找到在哪里添加验证码：

$(function() { 
    $('#step1_btn').click(function() { 
    $('form').validate({ 
     rules: { 
     first_name: "required", 
     last_name: "required" 
     } 
    }); 

    if($('form').valid()) { 
     $('#step1, #step1_btn').hide(); 
     $('#step2, #submit_btn').show(); 
    }  
    }); 


    $('#submit_btn').click(function() { 
    $('form').validate({ 
     rules: { 
     address: "required" 
     } 
    }); 

    if($('form').valid()) { 
     return true 
    }  
    }); 
});​ 

任何人都知道我怎样才能使验证工作，一旦我得到第二步呢？

Answer 1

我在这里给了形式，因为我已经修改了它（增加反向链接）

<form> 
    <div id="step1" style="display: block;"> 
     <label for="first_name">First Name</label> 
     <input type="text" value="" name="first_name" id="FirstName"/> 
     <label for="last_name">Last Name</label> 
     <input type="text" value="" name="last_name" id="LastName"/> 
    </div> 
    <div id="step2" style="display: none;"> 
    <label for="first_name">Address</label> 
    <input type="text" value="" name="address" id="Address"/> 
    </div> 

    <a href="#" id="step1_btn">Continue to step 2</a> 
    <a href="#" id="step2_btn" style="display:none;" >Back to step 1</a> 
    <input type="submit" id="submit_btn" value="Verstuur" style="display: none;" /> 
</form> 

JS

$(function(){ 
    $('form').validate({ 
     rules: { 
      first_name: "required", 
      last_name: "required", 
      address: "required" 
     } 
    }); 

    $('#step1_btn').click(function() { 
     if($('form').valid()) { 
      $('#step1, #step1_btn').hide(); 
      $('#step2, #submit_btn').show(); 
      $('#step2_btn').show();  
     }  
    }); 

    $('#step2_btn').click(function() { 
     $(this).hide(); 
     $('#step1, #step1_btn').show(); 
     $('#step2, #submit_btn').hide(); 
    });    

    $('#submit_btn').click(function() { 
     if($('form').valid()) { 
      return true 
     }  
    }); 
}); 

DEMO.