2

私は2つのことをするフォームを持っています：

  1. 名とメールアドレスをPHPに渡します。
  2. ユーザーが1つまたは2つ以上のデータセットを送信する場合に備えて、クリック時に新しい名前/メールフィールドのセットを動的に追加します。

すべてのユーザーが送信することを選択できるセットの正確な数がわからないため、データを配列でPHPに渡します（名前の後に[]を使用）。これにより、foreachループを使用して、常にすべてのデータセットを取得できます。理解を深めるためのコードを次に示します。

<form method="post" action="submit.php" id="formID">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="contacts">
<tr>
    <td><label class="namelabel"><span>Friend's First Name:</span><input type="text" name="friendName[]" class="friendName" id="name1" /></label></td>
    <td><label class="emaillabel"><span>Friend's Email:</span><input type="text" name="friendEmail[]" class="friendEmail" id="email1" /></label></td>
</tr>
</table>
<p class="addmore"><a href="#" id="addclick">Click Here To Send This To More Friends</a></p>
<input type="submit" value="Spread The News!" name="submit" />
    </form>
<script language="javascript" type="text/javascript" src="include/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="include/jquery.validate.pack.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        fieldCount = 1;
        $("#addclick").click(function(e){
            e.preventDefault();
            fieldCount+=1;
            $('#contacts tr:last').after('<tr><td><label class="namelabel"><span>Friend\'s First Name:</span><input type="text" name="friendName[]" class="friendName" id="name' + fieldCount + '" /></label></td><td><label class="emaillabel"><span>Friend\'s Email:</span><input type="text" name="friendEmail[]" class="friendEmail" id="email' + fieldCount + '" /></label></td></tr>');
        });
        $("#formID").validate({
rules: {
    "friendName[]": "required",
    "friendEmail[]": "required email",
  }
});
        });
    </script>

ただし、問題は、最初のfriendName[]とfriendEmail[]のみが送信時に検証されることです。検証を機能させるには、同じ名前の他のフィールドをクリックする必要があります（怠惰な検証がフォーカスの後にのみ開始されるように）

フォームフィールドに同じ名前を使用して、それらすべてを同時に検証するにはどうすればよいですか？

4

3 に答える 3

3

以下の手順に従ってください。

1) jquery.validate.js ファイルを開きます
2) checkForm を見つけます: function() {
3) この関数を以下のコードに置き換えます。 

checkForm: function() {
    this.prepareForm();
    for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
        if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
            for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
                    this.check( this.findByName( elements[i].name )[cnt] );
            }
        } else {
            this.check( elements[i] );
        }
    }
    return this.valid();
}
于 2011-08-06T11:33:46.463 に答える
1

動的に追加された各アイテムには一意の名前が必要なため、これは機能しません。この正確な問題については、SO に関するこの投稿を確認してください。

JQuery Validate Plugin を使用して、同じ名前の複数のフォーム フィールドを検証する

于 2009-06-25T03:22:57.610 に答える
0

私は、JQuery の慣用句に少し慣れていません。ただし、このコールバックを検証呼び出しに追加すると機能します。

submitHandler: function(form) {
  var els = $('.friendName, .friendEmail');
  for (var i = 0; i < els.length; i++) {
    $(form).validate().element(els[i]);
  }
}

明らかに、JQuery のイディオム (別名 hlep1!) を知っている人なら、割り当て先elsとループを削除できます。

送信ハンドラーは、フォームが有効になったときにのみ呼び出されます。各名前の最初のインスタンスがチェックされると、フォームは有効になります。別の方法は、プラグインをハック/モンキーパッチして、そのチェックを削除することです。

于 2009-06-25T04:00:53.553 に答える