title: jQuery: validating a field that was hidden at first
body: <p>Ok, this is pretty hard for me to explain but I'm going to do my best.</p>
  
  <p>I have a single form that I have split up into 3 seperate steps to make it easier for the user to process the data. Thanks to jQuery, I'm easily able to do this by hiding and showing elements in the dom, but because of this also, jQuery is having trouble validating data that was hidden initially.</p>
  
  <p>Please take a look at the following form: <a href="http://jsfiddle.net/Egyhc/" rel="nofollow">http://jsfiddle.net/Egyhc/</a></p>
  
  <pre><code>&lt;form&gt;
    &lt;div id="step1" style="display: block;"&gt;
      &lt;label for="first_name"&gt;First Name&lt;/label&gt;
      &lt;input type="text" value="" name="first_name" id="FirstName"/&gt;
  
      &lt;label for="last_name"&gt;Last Name&lt;/label&gt;
      &lt;input type="text" value="" name="last_name" id="LastName"/&gt;
    &lt;/div&gt;
  
  
    &lt;div id="step2" style="display: none;"&gt;
      &lt;label for="first_name"&gt;Address&lt;/label&gt;
      &lt;input type="text" value="" name="address" id="Address"/&gt; 
    &lt;/div&gt;
  
    &lt;a href="#" id="step1_btn"&gt;Continue to step 2&lt;/a&gt;
    &lt;input type="submit" id="submit_btn" value="Verstuur" style="display: none;" /&gt;
  &lt;/form&gt;
  
  
  $(function() {
    $('#step1_btn').click(function() {
      $('#step1, #step1_btn').hide();
      $('#step2, #submit_btn').show();        
    });
  });​
  </code></pre>
  
  <p>As you can see, it's a fairly simple form but when I add validation, only the first "step" works. The second step doesn't get validated.</p>
  
  <p>Below you can find the code where I added the validation:</p>
  
  <pre><code>$(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
      }     
    });
  });​
  </code></pre>
  
  <p><br><br>
  Anyone know how I can make the validation work once I get to the second step as well?</p>