jquery convalida plug-in su input di moduli dinamici non funzionanti

Question

Ho un modulo in cui sto avendo alcuni campi e quindi se necessario, l'utente può aggiungere più campi dello stesso tipo. Sto usando http://jqueryvalidation.org/ validate plugin per convalidare i campi.

Come ho letto da qualche parte il plugin jquery validate richiede nomi univoci ai campi per convalidarli. Quindi sto nominando ogni campo in modo univoco. Innanzitutto speravo che il plugin di convalida si occupasse della convalida dell'elemento aggiunto dinamicamente se aggiungo regole usando le classi. Ma si scopre che non è così.

Quindi, anche se il nome di ciascun campo è univoco, il plug-in di convalida convalida solo il primo input che è stato inizialmente visualizzato.

Ho anche provato a utilizzare $.clone() nella speranza che si occuperà di tutte le associazioni di eventi. Ma non ha funzionato per me. Quindi mi sono spostato in underscore per ripetere il markup dato che ci sono un certo numero di campi e non voglio scrivere template in JS e nominare di conseguenza.

Non riesco a trovare una soluzione a questo e bloccato qui. Non posso più fino a quando questo problema non sarà risolto.

Ecco JS che ho scritto.

$("#work_form").validate(); 

$(".work_emp_name").rules("add", { 
    required: true 
}); 

_.templateSettings.variable = "element"; 
var tpl = _.template($("#form_tpl").html()); 

var counter = 1; 

$("form").on("click", ".add_employer", function (e) { 
    e.preventDefault(); 
    var tplData = { 
     i: counter 
    }; 
    $("#word_exp_area").append(tpl(tplData)); 
    counter += 1; 
}); 

Si prega di trovare il markup in violino istituito.

example and code set up here

Answer 1

Quando si utilizza uno dei metodi di questo plug-in, come .rules(), e il targeting più di un elemento, come un class, è necessario utilizzare anche il metodo di jQuery .each().

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

E non si può utilizzare .rules() su elementi che non esistono ancora nel DOM. È sufficiente spostare il metodo .rules() all'interno della funzione che crea i nuovi input.

$("form").on("click", ".add_employer", function (e) { 
    e.preventDefault(); 
    var tplData = { 
     i: counter 
    }; 
    $("#word_exp_area").append(tpl(tplData)); 
    counter += 1; 
    $('.work_emp_name').each(function() { 
     $(this).rules("add", { 
      required: true 
     }); 
    }); 
}); 

demo funzionante: http://jsfiddle.net/Yy2gB/10/

---

Tuttavia, è possibile rendere più efficiente da un solo mira quello nuovo campo, invece di tutti i campi con l'work_emp_nameclass.

$("form").on("click", ".add_employer", function (e) { 
    e.preventDefault(); 
    var tplData = { 
     i: counter 
    }; 
    $("#word_exp_area").append(tpl(tplData)); // <- add new field 
    $('input[name="work_emp_name['+counter+']"]').rules("add", { // <- apply rule to new field 
     required: true 
    }); 
    counter += 1; 
}); 

demo funzionante: http://jsfiddle.net/Yy2gB/11/

---

Entrambi i miei esempi sopra riportati sono per l'aggiunta di regole per i campi creati dinamicamente.Avrai ancora bisogno di dichiarare tutte le regole per i vostri campi statici su pronto dom come segue ...

$("#work_form").validate({ 
    rules: { 
     "work_emp_name[0]": { 
      required: true 
     } 
    } 
}); 

Answer 2

Restituisce le regole convalide per il primo elemento selezionato o aggiunge le regole specificate e restituisce tutte le regole per il primo elemento corrispondente. Richiede che il modulo padre sia convalidato, ovvero $ ("form") .validate() viene chiamato per primo o

Rimuove le regole specificate e restituisce tutte le regole per il primo elemento corrispondente. more info

function addRule(id){ 
    $("[name='work_emp_name["+id+"]']").rules("add", { 
     required: true 
    }); 
} 
$("#work_form").validate(); 
addRule(0); 

_.templateSettings.variable = "element"; 
var tpl = _.template($("#form_tpl").html()); 

var counter = 1; 

$("form").on("click", ".add_employer", function (e) { 
    e.preventDefault(); 
    var tplData = { 
     i: counter 
    }; 
    $("#word_exp_area").append(tpl(tplData)); 
    addRule(counter); 
    counter += 1; 
}); here 

Answer 3

Questo perché jQuery Validation convalida solo la prima occorrenza della matrice al momento.

È possibile controllare il mio commit sul plug-in che funzionerà correttamente su qualsiasi occorrenza dell'array denominato.