web-dev-qa-db-fra.com

jquery valider le plugin sur les entrées de formulaire dynamique ne fonctionne pas

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

Comme je l'ai lu quelque part, le plugin de validation jquery nécessite des noms uniques dans les champs pour les valider. Je nomme donc chaque champ de manière unique. Tout d'abord, j'espérais que le plugin de validation se chargerait de la validation des éléments ajoutés dynamiquement si j'ajoutais des règles à l'aide de classes. Mais il s'avère que non.

Ainsi, même si le nom de chaque champ est unique, le plugin de validation ne valide que la première entrée qui a été rendue initialement.

J'ai même essayé d'utiliser $. Clone () dans l'espoir que cela prendrait en charge toutes les liaisons d'événements. Mais cela n'a pas fonctionné pour moi. Je suis donc passé au 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 en JS et nommer en conséquence.

Je ne trouve pas de solution à cela et je suis coincé ici. Je ne peux pas continuer 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

javascriptjqueryformsjquery-validate
15
SachinGutte

Lorsque vous utilisez l'une des méthodes de ce plugin, comme .rules(), et que vous ciblez plusieurs éléments, comme class, vous devez également utiliser la méthode jQuery .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. Déplacez simplement la méthode .rules() à l'intérieur de 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
        });
    });
});

DEMO de travail: http://jsfiddle.net/Yy2gB/10/

Cependant, vous pouvez le rendre plus efficace en ciblant uniquement le seul nouveau champ , au lieu de tous les champs avec le 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 de travail: http://jsfiddle.net/Yy2gB/11/

Mes deux exemples ci-dessus sont pour ajouter des règles aux champs créés dynamiquement. Vous devrez toujours déclarer toutes les règles pour vos champs statiques sur dom prêt comme suit ...

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

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 correspondant. Nécessite que le formulaire parent soit validé, c'est-à-dire que $ ("formulaire") .validate () est appelé en premier ou

Supprime les règles spécifiées et renvoie toutes les règles du premier élément correspondant. 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
3
nzn

En effet, jQuery Validation ne valide actuellement que la première occurrence du tableau.

Vous pouvez vérifier mon commit sur le plugin qui fonctionnera très bien sur toute occurrence du tableau nommé.

1
Saurabh Sharma