Discussion :

[geeka]

Bonjour,
Je suis parvenue à trouver un code pour valider mon formulaire dynamique. Les champs obligatoires sont bien pris en compte, reste le souci que les messages sont en anglais. Puisque j'ai déjà mis les règles de validation (rules), la logique serait d'écrire en dessous les messages de validation (messages). Mais lorsque je fais ça, le message est bien affiché pour le 1er formulaire mais les formulaires suivants perdent toutes leurs conditions de validation, seulement à cause du "Messages" que j'ai rajouté ce qui fait que les formulaires sont soumis sans prendre en comptes les règles.
Voici mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
/*! jQuery Validation Plugin - v1.11.0  */
/*--------------------------
-------------*/
 $(document).ready(function() {
/*code permettant de rajouter des formulaires*/
/*------------
--------*/
 
/*Code de Validation du formulaire dynamique*/
       $('form.sky-form').on('submit', function(event) {
 
            // adding rules for inputs with class 'comment'
            $('input.comment').each(function() {
                $(this).rules("add", 
                    {
                        required: true,
			digits: true,
			messages: {       /*------ Problème à ce niveau ------*/
				required: "Veuillez saisir un numéro de téléphone",
				digits:"Veuillez saisir des chiffres"
						}
                    })
            });            
 
	 $('input.comment2').each(function() {
                $(this).rules("add", 
                    {
			digits: true,
 
                    })
            });

Ma question est : Pourquoi les rules s'appliquent-ils aux formulaires dynamiques et les messages ne s'appliquent-ils pas à tous les formulaires?

Merci d'avance.

[Diablo_22]

Bonjour,

peux tu initialiser un Plunker avec ton code dans un exemple pour que l'on puisse bien comprendre ton problème.

Merci.

[geeka]

Merci pour ta réponse.
Je ne connaissais pas Plunker, il est mieux que jsfiddle qui a souvent des bugs
Voici le code dans Plunker :
http://plnkr.co/edit/QmfKEsZSo8vsKcA1k4V8?p=preview

EDIT :
Exp du problème :
Le numéro de téléphone est obligatoire dans tous les formulaires.
- Si j'ai un seul formulaire et que je clique sur valider alors il y aura le message d'erreur :"Veuillez saisir un numéro de téléphone". Le formulaire n'est pas soumis.
- Si j'ai 2 formulaires ou plus et que je clique sur valider alors il l y aura tjrs des messages d'erreur, MAIS il suffit que je remplisse un seul champ obligatoire pour que les autres formulaires soient soumis et cela sans que leurs champs obligatoires ne soient pris en compte.

[Diablo_22]

Le problème avec ton code c'est que tu as mal situé ton message d'erreur.

Retire cette partie de code:

Code :

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

1
2
3
4
messages: {
        required: "Veuillez saisir un numéro de téléphone",
        digits:"Veuillez saisir des chiffres"
        }

Inspire toi de cet exemple tiré de la doc JQUERY

http://jqueryvalidation.org/validate/

[geeka]

Bonjour,
J'ai vu la syntaxe mais sur ce lien http://jqueryvalidation.org/rules/

Code :

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

1
2
3
4
5
6
7
8
9
 
$( "#myinput" ).rules( "add", {
  required: true,
  minlength: 2,
  messages: {
    required: "Required input",
    minlength: jQuery.validator.format("Please, at least {0} characters are necessary")
  }
});

Cette syntaxe correspond à la validation d'un formulaire dynamique, du moins c'est ce qui est dit dans un autre article. Et ici, je ne vois pas d'erreur avec l'emplacement de "messages".

[geeka]

Le problème est résolu
En fait, il n'y avait pas d'erreur dans la syntaxe. Le problème résidait dans la bibliothèque, j'ai donc effacé celle-ci :
/*! jQuery Validation Plugin - v1.11.0 */
Et mis une autre en lien en HTML, et ça marche :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<HTML>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<!-- La nouvelle bibliothèque -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.10.0/jquery.validate.js"></script>
<BODY>
<script>
 $(document).ready(function() {
/*code permettant de rajouter des formulaires*/
/*------------
--------*/
 
/*Code de Validation du formulaire dynamique*/
       $('form.sky-form').on('submit', function(event) {
 
            // adding rules for inputs with class 'comment'
            $('input.comment').each(function() {
                $(this).rules("add", 
                    {
                        required: true,
			digits: true,
			messages: {       /*------ Problème à ce niveau ------*/
				required: "Veuillez saisir un numéro de téléphone",
				digits:"Veuillez saisir des chiffres"
						}
                    })
            });            
 
	 $('input.comment2').each(function() {
                $(this).rules("add", 
                    {
			digits: true,
 
                    })
            });
</script>
</BODY>
</HTML>