jQuery Convalida l'elemento di input della matrice che viene creato dinamicamente

Question

Ho un modulo che desidero convalidare utilizzando the jQuery Validation plugin. Attualmente ho un problema con l'elemento input con array (name="inputname[]") che vengono creati dinamicamente con jQuery .on(). Lasciatemi spiegare il problema:

1. C'è un modulo, con un testo di input esistente denominato name[].
2. C'è un pulsante per aggiungere più testi di input e questo elemento viene eseguito con .on(). Ho cliccato 2 o 3 volte, quindi ci saranno più di 1 testo di input.
3. Faccio clic su Invia, il modulo è correttamente convalidato ma convalida solo il primo elemento di matrice creato e non l'altro elemento.

Per il codice completo ho creato un jsfiddle qui: http://jsfiddle.net/ThE5K/4/

jQuery:

$(document).ready(function() { 

    // MODE 1 
    // With [] or array name <<<< this one is not working 
    $("#addInput").on('click', function() { 
     $('#inputs').append($('<input class="comment" name="name[]" />')); 
    }); 


    /* MODE 2 
     Without [] or array name <<<< this one is working 
     var numberIncr = 1; 

     $("#addInput").on('click', function() { 
      $('#inputs').append($('<input class="comment" name="name' + numberIncr + '" />')); 
      numberIncr++; 
     }); 
    */ 

    $('form.commentForm').on('submit', function (event) { 

     $('input.comment').each(function() { 
      $(this).rules("add", { 
       required: true 
      }) 
     }); 

     event.preventDefault(); 

     console.log($('form.commentForm').valid()); 
    }) 

    $('form.commentForm').validate(); 
}); 

HTML:

<form class="commentForm"> 
    <div id="inputs"></div> 
    <input type="submit" /> 
    <span id="addInput">add element</span> 
</form> 

creo due modalità di loro, l'interno lavorando uno (testo di input dinamico cono nome dell'array ut) e quello non funzionante (testo di input dinamico con nome dell'array).

io siamo andati anche se coloro soluzione, ma purtroppo nessuno di loro ha lavorato:

• jquery validate add rules for an array input
• jquery validate is not working with dynamic content
• jQuery validate dynamic input array

prega di aiuto.

Answer 1

Per quanto riguarda il codice per creare i nuovi campi:

// Mode 1 
$("#addInput").on('click', function() { 
    $('#inputs').append($('<input class="comment" name="name[]" />')); 
}); 

L'intero motivo il vostro "Mode 1" non funzionava è perché avete assegnato lo stesso attributo nome esatto, name="name[]", ad ogni singola nuova input . Il plugin jQuery Validate richiede assolutamente che ogni elemento input abbia un attributo univoco univoco. Basta usare la variabile numberIncr all'interno di name[] per garantire questo nome univoco.

Inoltre, non si dovrebbero aggiungere regole su submit. L'evento submit è in genere in cui tutte le regole sono selezionate, quindi l'aggiunta di regole a questo punto non ha molto senso. Le nuove regole dovrebbero essere aggiunte quando vengono creati i nuovi campi di input.

Per il tuo caso semplice, il metodo rules('add') è comunque eccessivo per questo e puoi eliminare completamente il tuo gestore .on('submit'). Poiché la regola è required, è sufficiente aggiungere uno class="required" ai nuovi elementi input.

jQuery::

Ecco il codice lavorando

$(document).ready(function() { 

    // MODE 1 
    var numberIncr = 1; 
    $("#addInput").on('click', function() { 
     $('#inputs').append($('<input class="comment required" name="name[' + numberIncr + ']" />')); 
     numberIncr++; 
    }); 

    $('form.commentForm').validate(); 
}); 

DEMO: http://jsfiddle.net/ThE5K/6/