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
        }     
    });
});

演示。