Discussion :

[nico_nico]

Bonjour,

Je crée dynamiquement des champs input dans un formulaire (http://nicolasrio.fr/test2.html). La source est là : http://pastebin.com/LatweLuN

Je souhaite valider (plugin jquery.validate) ces champs texte de façon à ce qu'ils soient rendus obligatoires avant soumission du formulaire.

Problème : cliquez sur le bouton 'Add a horse' deux fois, cela ajoute deux lignes dans le tableau. Ensuite, cliquez sur le bouton 'Validate' sans remplir aucun champ. Seul le premier input s'est vu attribuer la classe error. Cela ne va pas. Les deux champs de la table auraient du être rouges car non valides.

Bizarrerie : si, à ce moment, on clique dans le second champ input de la table et qu'on clique ailleurs (focus puis blur), le champ devient rouge !

Dans cet exemple, j'ajoute une règle pour chaque champ input de la table (cf. http://pastebin.com/LatweLuN, ligne 94). Je précise que j'ai également essayé avec la méthode jQuery.validator.addClassRules, qui permet d'affecter une règle de validation à aux éléments d'une certaine classe, sans plus de succès : le comportement est le même qu'avec le rules("add", ...).

Merci d'avance pour votre aide.

[nico_nico]

Si quelqu'un passe par là et est intéressé :

Dans mon exemple, tous les champs dynamiques avaient le même attribut name="nomCheval[]" permettant de tout récupérer dans un tableau en PHP.

Il semble que le plugin validate a besoin d'un attribut name différent pour chaque élément à valider.

La ruse : lors de la génération des inputs, je donne un name unique, puis, dans l'option submitHandler de validate, j'ai ajouté le code suivant pour renommer les inputs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("[input[name^='nomCheval']").each(function(){
       $(this).attr('name', 'nomCheval[]');
});