0

好的，这对我来说很难解释，但我会尽力而为。

我有一个表格，我将其分成 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
    }     
  });
});​



一旦我进入第二步，任何人都知道如何使验证工作？

4

1 回答 1

3

我在这里给出了表格，因为我已经修改了它（添加了反向链接）

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

演示。

于 2012-06-15T20:59:14.973 回答