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.