Javascript Girl
  1. Javascript Girl
  3. Jquery validate plugin sur les entrées de formulaire dynamique ne fonctionne pas
Intereting Posts
AngularJS: Pass $ scope variable comme attribut de directive Impossible d'utiliser le gulp-rev-remplacer le travail avec gulp-useref Générer un nombre unique dans la plage (0 – X), garder un historique pour éviter les doublons Télécharger Tar File via NodeJS Mac / Windows pop-up clavier virtuel en Javascript GreaseMonkey script à la connexion automatique à l'aide de l'authentification HTTP Ajouter javascript à la propriété OnBlur d'un contrôle de zone de texte ASP.NET Google Maps Api V3 – Pays ou villes stylistiques La boîte de saisie du fichier HTML ne déclenche pas le fichier. Sélectionnez l'événement et la mise en garde sur l'événement onchange – angularJS Pourquoi le résultat JSON pourrait-il être booléen au lieu d'un objet ou d'un tableau? En utilisant javascript pour détecter si l'url existe avant d'afficher dans iframe Avoir une lecture sonore lorsque l'alerte est déclenchée Que se passe-t-il dans ce code avec des objets Nombre contenant des propriétés et en augmentant le nombre? Jquery déplace les éléments dans un ordre aléatoire Comment utiliser WOW.js dans le Webpack Angular 2?

Jquery validate plugin sur les entrées de formulaire dynamique ne fonctionne pas

J'ai un formulaire où j'ai des champs et, si nécessaire, l'utilisateur peut ajouter d'autres champs du même type. J'utilise http://jqueryvalidation.org/ valide le plugin pour valider les champs.

Lorsque j'ai lu quelque part, jpey validate plugin requiert des noms uniques pour les champs pour les valider. Donc, je nomme chaque domaine de manière unique. D'abord, j'espérais que le plugin de validation s'occupera de la validation des éléments ajoutés dynamiquement si j'ajoute des règles à l'aide de classes. Mais il s'avère que ce n'est pas le cas.

Donc, même si le nom de chaque champ est unique, le plugin de validation valide uniquement la première entrée qui a été initialement créée.

J'ai même essayé d'utiliser $ .clone () dans l'espoir qu'il prendra soin de tous les liaisons d'événements. Mais cela n'a pas fonctionné pour moi. Je me suis donc déplacé vers le soulignement pour répéter le balisage car il y a un certain nombre de champs et je ne veux pas écrire de modèles dans JS et nom en conséquence.

Je ne peux pas trouver une solution à cela et coincé ici. Ne peut pas plus jusqu'à ce que ce problème soit résolu.

Voici JS que j'ai écrit. 

$("#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; });

Veuillez trouver le balisage dans la configuration du violon.

Exemple et code mis en place ici

Lorsque vous utilisez une des méthodes de ce plugin, comme .rules() , et en ciblant plus d'un élément, comme une class , vous devez également utiliser la méthode .each() . 

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

Et vous ne pouvez pas utiliser .rules() sur des éléments qui n'existent pas encore dans le DOM. .rules() simplement la méthode .rules() vers la fonction qui crée vos nouvelles entrées. 

 $("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 }); }); });

Working DEMO: http://jsfiddle.net/Yy2gB/10/

Cependant, vous pouvez le rendre plus efficace en ciblant uniquement le nouveau champ , au lieu de tous les champs avec la class work_emp_name . 

 $("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; });

Working DEMO: http://jsfiddle.net/Yy2gB/11/

Les deux exemples ci-dessus sont destinés à ajouter des règles aux champs créés dynamiquement. Vous devrez toujours déclarer toutes les règles pour vos champs statiques sur Dom Ready comme suit … 

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

Renvoie les règles de validation pour le premier élément sélectionné ou Ajoute les règles spécifiées et renvoie toutes les règles pour le premier élément apparié. Nécessite que le formulaire parent soit validé, soit $ ("formulaire") .validate () est appelé premier ou

Supprime les règles spécifiées et renvoie toutes les règles pour le premier élément apparié. Plus d'informations 

 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

C'est parce que jQuery Validation valide uniquement la première occurrence du tableau actuellement.

Vous pouvez vérifier mon engagement sur le plugin qui fonctionnera bien sur toute occurrence du tableau nommé.