jQuery検証プラグインは、動的に作成されたフォーム要素を検証しません。

Question

私は入力要素を使って新しい行を動的に追加できるフォームを用意しました。 フォームを送信する前に、http://jqueryvalidation.org/のプラグインを使用して検証します。 は、現在の入力要素で新しい行を追加するためのコードは次のようになります。私はそうのようなjQueryの検証プラグインを初期化し、私の文書readyイベントで

function addTimeRow(table, stime) 
{ 
    //var rowIdx = $('#seminarTimes tr').length - 1; 

    var $id = $('<input type="hidden" name="stid[]">'); 
    var $dateField = $('<input type="text" name="date[]" class="input-mini">'); 
    var $date = $('<div class="input-append date">') 
     .append($dateField) 
     .append('<span class="add-on"><i class="icon-calendar">'); 
    var $from = $('<input type="text" name="from[]" class="input-mini"> <span>(hh:mm)</span>'); 
    var $to = $('<input type="text" name="to[]" class="input-mini"> <span>(hh:mm)</span>'); 

    if (typeof(stime) !== 'undefined') 
    { 
     $id.attr('value', stime.id); 
     $dateField.attr('value', stime.date); 
     $from.attr('value', stime.from); 
     $to.attr('value', stime.to); 
    } 
    else 
     $id.attr('value', -1); 

    // Attach new input row. 
    table 
     .append($('<tr>') 
      .append($id) 
      .append($('<td>') 
       .append($date)) 
      .append($('<td>') 
       .append($from)) 
      .append($('<td>') 
       .append($to)) 
      .append($('<td class="vert">') 
       .append($('<button class="btn btn-mini btnDelTime"><i class="icon-trash">')))); 

    // Attach rules. 
    $dateField.rules('add', { required: true }); 
    $from.rules('add', { required: true }); 
    $to.rules('add', { required: true }); 

    // Create pickers. 
    $date.datepicker({ 
     language: 'de', 
     autoclose: true, 
     todayBtn: true, 
     todayHighlight: true, 
    }).on('changeDate', function(e) { 
     editSeminarFormValidator.element($dateField); 
     $date.datepicker('hide'); 
    }); 
} 

：

var validator = $('#editSeminarForm').validate({ 
    debug: true, 
    errorLabelContainer: '#error-label', 
    wrapper: 'li', 
    messages: { 
     price: 'Bitte geben Sie einen Preis ein!' 
    } 
}); 

を今私の実際の問題があり、新しい入力フィールドのどれも検証されません。 私は、サーバー側でフォームを扱いやすくするために入力配列を使用していることを知っています。これらの配列は、入力フィールドが検証されない問題ですか？

EDIT - 私の現在のソリューション：魔法のように

var rowIdx = 0; 
function addTimeRow(table, stime) 
{ 
    var $id = $($.validator.format('<input type="hidden" id="stid{0}" name="stid[{0}]">', rowIdx)); 
    var $dateField = $($.validator.format('<input type="text" id="date{0}" name="date[{0}]" class="input-mini">', rowIdx)); 
    var $date = $('<div class="input-append date">') 
     .append($dateField) 
     .append('<span class="add-on"><i class="icon-calendar">'); 
    var $from = $($.validator.format('<input type="text" id="from{0}" name="from[{0}]" class="input-mini"> <span>(hh:mm)</span>', rowIdx)); 
    var $to = $($.validator.format('<input type="text" id="to{0}" name="to[{0}]" class="input-mini"> <span>(hh:mm)</span>', rowIdx)); 

    if (typeof(stime) !== 'undefined') 
    { 
     $id.attr('value', stime.id); 
     $dateField.attr('value', stime.date); 
     $from.attr('value', stime.from); 
     $to.attr('value', stime.to); 
    } 
    else 
     $id.attr('value', -1); 

    // Attach new input row. 
    table 
     .append($('<tr>') 
      .append($id) 
      .append($('<td>') 
       .append($date)) 
      .append($('<td>') 
       .append($from)) 
      .append($('<td>') 
       .append($to)) 
      .append($('<td class="vert">') 
       .append($('<button class="btn btn-mini btnDelTime"><i class="icon-trash">')))); 

    // Attach rules. 
    $dateField.rules('add', { required: true }); 
    $from.rules('add', { required: true }); 
    $to.rules('add', { required: true }); 

    // Create pickers. 
    $date.datepicker({ 
     language: 'de', 
     autoclose: true, 
     todayBtn: true, 
     todayHighlight: true, 
    }).on('changeDate', function(e) { 
     editSeminarFormValidator.element($dateField); 
     $date.datepicker('hide'); 
    }); 

    rowIdx++; 
} 

作品！

Answer 1

新しい要素にルールを追加するために使用しているロジックに重大な問題はないようです。 ですが、.rules()メソッドをjQuery オブジェクトに追加する必要があります.jQuery セレクタを使用し、要素のHTMLでは使用しません。

何かのような...

$('#myInputID').rules('add', {...}); 

か...

$('input[name="myname"]').rules('add', {...}); 

しかし、あなたの問題の核心はここにある...

var $id = $('<input type="hidden" name="stid[]">'); 
    var $dateField = $('<input type="text" name="date[]" class="input-mini">'); 
    var $date = $('<div class="input-append date">') 
     .append($dateField) 
     .append('<span class="add-on"><i class="icon-calendar">'); 
    var $from = $('<input type="text" name="from[]" class="input-mini"> <span>(hh:mm)</span>'); 
    var $to = $('<input type="text" name="to[]" class="input-mini"> <span>(hh:mm)</span>'); 

お知らせname属性？それは新しい行ごとに同じになるでしょう。

各input要素にユニークnameが含まれていない限り、jQuery Validateプラグインは機能しません。新しい要素ごとに新しいnameが作成されるように、コードを変更するだけです。

Answer 2

それはの重複であるかもしれない：

1. Adding jQuery validator rules to dynamically created elements in ASP
2. jQuery - How to dynamically add a validation rule

かいつまんで、あなたは

$('input').rules('add', 'required') 

http://validation.bassistance.de/rules

を呼び出す必要があります

または、更新され、サイドノートとして

http://jqueryvalidation.org/rules

：あなたはJSからHTMLの多くを注入するので、テンプレートエンジンを試してみるのは良い考えかもしれません。