Messages de validation

Version imprimable

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:

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.

14/08/2015, 14h29
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.
14/08/2015, 15h01
geeka

Merci pour ta réponse.
Je ne connaissais pas Plunker, il est mieux que jsfiddle qui a souvent des bugs :D
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.
14/08/2015, 19h26
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:

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/

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

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". :?

Le problème est résolu :P
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:

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>