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

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/ convalidare il 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 dynamicmente se aggiungo regole usando le classi. Ma si scopre che non è così.

Quindi, anche se il nome di ciascun campo è unico, il plugin di convalida convalida solo il primo input che è stato inizialmente reso.

Ho anche provato a usare $ .clone () nella speranza che si occupi di tutti i binding 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 markup nel set up fiddle.

esempio e codice impostati qui