4

2つのステップからなるフォームがあります。私がやりたいのは、次のステップに進む前に各ステップを検証することです。ユーザーは、ステップ1のフィールドが無効であるステップ2に到達できないようにする必要があります。

js fiddle： 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>

</ p> 

$(function() {
  $('#step1_btn').click(function() {
    $('#step1').hide();
    $('#step2, #submit_btn').show();        
  });
});​

どうやって私がこれを達成することを提案しますか？

4

1 に答える 1

6

非表示フィールドの検証を無視できるjQuery検証の非常に優れた設定があります。したがって、ステップの表示/非表示ロジックを処理でき、検証のために次のようにすることができます。

これが示唆するように：隠されたものを無視する

$("form").validate({
   ignore: ":hidden"
});

デフォルトのフォーム送信以外の検証をチェックする必要がある場合は、次のvalidような方法を使用できます$("form").valid()。

フォームに検証クラスがないことに気付いたので、それを別の場所で処理していると思います。そうでない場合に備えて、jQueryに次のようなcssクラスを介してルールを検証するように指示できます。<input type="text" class="required digits"/>

詳細はこちら： http： //bassistance.de/2008/01/30/jquery-validation-plugin-overview/

于 2012-06-15T14:35:31.157 に答える