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

ご覧のとおり、これはかなり単純なフォームですが、検証を追加すると、最初の「ステップ」だけが機能します。2 番目のステップは検証されません。

以下に、検証を追加したコードを示します。

$(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
    }     
  });
});​



2番目のステップにも到達したら、検証を機能させる方法を知っている人はいますか?

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 に答える