jQueryは動的なフィールド数で検証します

Question

私は、フィールドのグループの動的な数を持つステージを持つフォームを持っています。この数は前のステージの回答に基づいています。

私がどんなにすなわち

<input id="foo[0]"... 
<input id="bar[0]"... 

<input id="foo[1]"... 
<input id="bar[1]"... 

<input id="foo[2]"... 
<input id="bar[2]"... etc 

、配列として番号をフィールドサーバサイドを生成しています、すべてのフィールドが&を必要としている私はまた、いくつかのケースでは数字の種類&数に対して検証する必要があります。私はクライアント側の処理にjQuery validate pluginを使用しています（サーバー側のものでもバックアップされています）&フォームはXHTML Strictを渡す必要があるため、検証はインラインではできません（EDIT：下記参照）。

私の問題は、ダイナミックなフィールド数でバリデートを使用する方法を考えることができないということです。ここでは検証構文は通常、フォームの残りの部分のために次のようになります。

$(document).ready(function() { 

    // validate stage_form on keyup and submit 
    var validator = $("#form_id").validate({ 

     // rules for field names 
     rules: { 

      name: "required", 
      address: "required", 
      age: { required: true, number: true } 

     }, 

     // inline error messages for fields above 
     messages: { 

      name: "Please enter your name", 
      address: "Please enter your address", 
      age: { required: "Please enter your age", number: "Please enter a number" } 

     } 

    }); 

}); 

Answer 1

実際には、ルールをvalidate（）オプションとして初期化する代わりにクラスを使用すると効果的です。

マークアップ：

<input id="foo[0]" class="required" 
<input id="bar[0]" class="required number" 

<input id="foo[1]" class="required" 
<input id="bar[1]" class="required email" 

のjQuery：

$(document).ready(function() { 

    var validator = $("#form_id").validate({ 
    messages: { 
      name: "Please enter your name", 
      address: "Please enter your address", 
      age: { 
       required: "Please enter your age", 
       number: "Please enter a number" 
      } 

    } 

    }); 

}); 

は、この作品を願っています。 Sinan。

Answer 2

ない答えを私は「必要」と「型」のインライン検証ルールを設定することです私の「暫定」ソリューションを、投稿しますので、サーバー側のチェックに 'maxlength'を残し、カスタムメッセージをインラインタイトルタグで表示します。

これはこの仕事の目的にとってはおそらく十分ですが、jQuery内で「完全に」行う方法があるのか​​どうか不思議です。

Answer 3

xhtml互換性のないルールを定義するのにcustom class rulesを使用しようとしましたか？

docsの例では1つのクラスしか使用していませんが、異なるカスタムクラスを組み合わせて、必要な検証ルールを達成できると思います。私は自分でこれを試していません。

Answer 4

「メタデータ」を使用する方法が見つかりました。

これは、動的な名前のテンプレート内で使用する必要があります。だから、私はその名前を知る必要はありません。

クリーンなタグ付きの純粋なjavascriptでコードを使用することは、依然として不可能です。

<script src="jquery.metadata.js" type="text/javascript"></script> 

<input validate="{required: true, email: true, messages: { required: 'i'm required', 'i'm not valid e-mail' }}" name="dynamicRow[ myRandomNumber ]"type="text" class="input_normal" /> 

$(function() { 
    // setup stuff 
    $.metadata.setType("attr", "validate"); 
}); 

Answer 5

これを行う別の方法があります。

/* Normal validate initialisation. */ 
$('#myForm').validate({ 

    /* Use the submitHandler method to add custom-selector-based validation. */ 
    submitHandler: function(form, ev) { 

     /* Find your dynamic field/s. Note that you may want to access them via a scope external to validate, as any selection you do in this internal scope will be static from the form's pre-edit state. */ 
     var el = $('#selector'); 

     /* Do your custom validation. */ 
     if ( el.val() !== 'A' ) { 

      /* Show any errors:- 'fieldname': 'error message'. */ 
      this.showErrors({ 
       'name-of-a-field-near-where-you-want-your-error-placed': 'Please enter "A" to continue' 
      }); 

      /* Prevent form submission. */ 
      return; 
     } 
    } 
});