2011-01-07 4 views
2

フォーム内に2つのテキストボックスA、Bと2つのボタンC、Dがあるとします。次に、ボタンCをクリックすると、テキストボックスAだけが有効で、フォームが有効で、ボタンDをクリックしたときに、テキストボックスBだけが有効でフォームが有効であれば、それが必要です。JQuery Validate Pluginを使用して同じHTMLフォームの異なるボタンをクリックすると、異なるフィールドを検証します

誰でもこれを行う方法を知っていますか?

+0

良い質問... – dqhendricks

答えて

2

ignoreオプションを使用します。

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

$("#c").click(function(){ 
    //$("#a").removeClass("ignore"); 
    //$("#b").addClass("ignore"); 
    $(".step1").removeClass("ignore"); 
    $(".step2").addClass("ignore"); 
    $("form").valid(); 
}); 

$("#d").click(function(){ 
    //$("#a").addClass("ignore"); 
    //$("#b").removeClass("ignore"); 
    $(".step1").addClass("ignore"); 
    $(".step2").removeClass("ignore"); 
    $("form").valid(); 
}); 

EDITは:dannie.fポスト@私のコメントで概説

0

として上記の答えが正しい方向に私を置くが、それは完全に私のために動作しませんでした。フィールドがたくさんある場合は、ボタンクリック時に各フィールドのクラスを追加したり削除したりするのは面倒です。さらに、無視する必要のあるフィールドのIDまたはクラスを知る必要があります。

これは私が思いついた解決策です。 divsを使用して検証グループを作成し、jquery セレクタを使用してバリデータにそのグループに含まれていないフィールドを無視するように指示しました。

<html> 
<head> 
<script type="text/javascript"> 
    $(function(){ 
     section1Validator = $("#form1").validate(
     { ignore: ":not(#section1 *)" }); 

     section2Validator = $("#form1").validate(
     { ignore: ":not(#section2 *)" }); 

    $("#c").click(function(){ 
      if (section1Validator.form()) { 
       // do something when form is valid 
      } 
     }); 

     $("#d").click(function(){ 
      if (section2Validator.form()) { 
       // do something when form is valid 
      } 
     }); 
    }) 
</script> 
</head> 

<body> 
<form id="form1"> 
    <div id="section1"> 
     <input id="a" name="a" type="text" class="required"/> 
     <button id="c" type="buttom">submit</button> 
    </div> 
    <div id="section2"> 
     <input id="b" name="b" type="text" class="required"/> 
     <button id="d" type="button">submit</button> 
    </div> 
</form> 
</body> 
</html> 
+0

は【こちら】(http://stackoverflow.com/questions/2636512/validate-subset-of-a-form-using-jquery-validate-plugin)は、別のオプションです指定されたセレクタによって返されたすべての要素を検証するためのバリデータへの拡張です。 –

+0

私は[Validity jQuery Plugin](http://validity.thatscaptaintoyou.com/)を使いました。はるかに使いやすく、柔軟性があります。 –

+0

私はignoreクラスを使うのが好きです。クラスを使用してフィールドのグループを分類できます。すなわち、入力1、入力2、入力3 =クラスステップ1、入力4,5,6クラスステップ2。私のクリックで$( "。step1")を使用します。addClassと$( "。step2")。removeClass。私は有効性のプラグインを見てみましょう。 – Jules

関連する問題