jQuery Validierungs-Plugin validiert nicht dynamisch erzeugte Formularelemente

Question

Ich habe ein Formular, in dem Sie dynamisch neue Zeilen mit Eingabeelementen hinzufügen können. Bevor ich mein Formular abschicke, wird es mit dem Plugin von hier http://jqueryvalidation.org/ validiert. Zur Zeit der Code eine neue Zeile mit Eingabeelementen für das Hinzufügen sieht wie folgt aus:

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'); 
    }); 
} 

In meinem Dokument bereit Ereignis, das ich die JQuery Validierung Plugin wie so initialisiert werden:

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

Nun meine eigentliche Problem ist, dass keines der neuen Eingabefelder validiert wird. Ich weiß, dass ich Eingabe-Arrays für die leichtere Handhabung des Formulars auf der Serverseite verwenden. Sind diese Arrays das Problem, warum meine Eingabefelder nicht validiert werden?

EDIT - Meine aktuelle Lösung:

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++; 
} 

wirkt wie ein Zauber!

Answer 1

Mit der Logik, die Sie zum Hinzufügen von Regeln zu den neuen Elementen verwenden, scheint nichts zu tun zu haben. Obwohl, müssen Sie die .rules()-Methode an ein jQuery Objekt mit einem jQuery Selektor, nicht das HTML des Elements anhängen.

so etwas wie ...

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

oder ...

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

Aber das Herz des Problems ist hier ...

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>'); 

Hinweis das Attribut name ? Das wird für jede neue Zeile gleich sein.

Das Problem ist, dass die jQuery Validate-Plugin funktioniert nicht, wenn jedes input Element ein einzigartigenname enthält. Ändern Sie einfach Ihren Code, um sicherzustellen, dass für jedes neue Element ein neuer name erstellt wird.

Answer 2

Es könnte ein Duplikat sein:

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

Lange Rede kurzer Sinn, müssen Sie

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

http://validation.bassistance.de/rules

nennen

oder aktualisiert,

http://jqueryvalidation.org/rules

Als Randbemerkung: Da Sie eine Menge HTML von JS injizieren könnte es eine gute Idee sein, eine Template-Engine zu versuchen.