Gestion des erreurs:les messages se répètent

**moimp** · 28/12/2018, 15h08

Bonjour à tous

Dans le code évoqué précédemment, je rencontre une deuxième difficulté.
Chaque fois que j'envoie mon formulaire, les messages d'erreurs se répètent.
Une fois de plus je vais me

battre avec jreaux62: soit j'en mets trop, soit pas assez.

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
		<article id="right">
			<h2><?= ABO_H2 ?></h2>
 
			<div id="errorsDiv">
			<?php
                                // Affichage des erreurs
                                if (isset($errors)) {
                                        echo displayErrors($errors);
                                        unset($errors);
                                }
                        ?>
			</div>
 
			<!-- ... suite du code ... -->
		</article>

Et mon code javascript in extenso:

Code javascript :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
"use strict";
 
// Déclaration des constantes
//###########################
 
console.log(fromPHPtoJS.alerts);
const
	myForm		= window.document.querySelector('form'),
	pseudoInput	= window.document.querySelector('#pseudo'),
	info		= window.document.querySelector('.info'),
	errorsDiv	= window.document.querySelector('#errorsDiv'),
	pseudos		= fromPHPtoJS.pseudos,
	// La variable suivante destinée à trouver les balises à supprimer donne un résultat vide
	//pMsgs		= window.document.querySelectorAll("p[style='margin: 0.3rem;']");
	pMsgs		= window.document.querySelectorAll("p[style*='margin']");
	console.log(pMsgs);
 
const textes = [
	document.createTextNode(""),
	document.createTextNode(fromPHPtoJS.alerts.pseudo[0]), // Ce pseudo existe déjà, cherchez en un autre.
	document.createTextNode(fromPHPtoJS.alerts.pseudo[1])  // Le pseudo ne peut pas commencer par un chiffre.
];
 
const patterns = {
	nom:	/^(de |d'|von |van |l')?[A-ZÀÁÂÆÇÈÉÊËÌÍÎÏÑÒÓÔŒÙÚÛÜÝŸ][a-zA-Zàéèêëîïôöûüùç]+([' -](de |d'|von |van )?[A-Z][a-zA-Zàéèêëîïôöûüùç]+)?[a-zA-ZàéèêëîïôöûüùçÀÁÂÆÇÈÉÊËÌÍÎÏÑÒÓÔŒÙÚÛÜÝŸ]$/,
	prenom:	/^[A-ZÀÁÂÆÇÈÉÊËÌÍÎÏÑÒÓÔŒÙÚÛÜÝŸ][a-zA-Zàáâæäßçéèêëìíîïñòóôöœùúûüýÿ.]?([. -][A-ZÀÁÂÆÇÈÉÊËÌÍÎÏÑÒÓÔŒÙÚÛÜÝŸ][a-zA-Zàáâæäßçéèêëìíîïñòóôöœùúûüýÿ.])?/,
	courriel:	/^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/i,
	tel:	/^\+[1-9][0-9]{9,}$/
};
 
// Aide à la saisie du pseudo
//###########################
 
pseudoInput.addEventListener('change', function(e) {
	// On vérifie que le premier caractère n'est pas numérique
	if ( '0' < pseudoInput.value.charAt(0) && pseudoInput.value.charAt(0) < '9' ) {
		info.style.backgroundColor = '#FFFF99';
		info.appendChild( textes[2] );
		e.preventDefault();
	}
 
	// Contrôle de non existence du pseudo entré par l'utilisateur
	else if ( pseudos.indexOf(pseudoInput.value) != -1 ) {
		info.style.backgroundColor = '#FFFF99';
		info.appendChild( textes[1] );
		e.preventDefault();
	}
 
	else {
		info.style.backgroundColor = 'transparent';
		info.appendChild( textes[0] );
	}
}, false );
 
// Contrôle de saisie avant envoi
//###############################
 
myForm.addEventListener('submit', function(e) {
	let errors = [];
 
	if ( myForm.gender.value === '' )
	{
		errors.push(fromPHPtoJS.alerts.civilite);
	}
	if ( myForm.nom.value.length < 2 || !patterns.nom.test(myForm.nom.value) )
	{
		errors.push(fromPHPtoJS.alerts.nom);
	}
	if ( myForm.prenom.value.length < 2 || !patterns.prenom.test(myForm.prenom.value) )
	{
		errors.push(fromPHPtoJS.alerts.prenom);
	}
	if ( !patterns.courriel.test(myForm.courriel.value) )
	{
		errors.push(fromPHPtoJS.alerts.courriel);
	}
	if ( myForm.adresse1.value.length + myForm.adresse2.value.length < 5 )
	{
		errors.push(fromPHPtoJS.alerts.adresses);
	}
	if ( myForm.pays.value === '' )
	{
		errors.push(fromPHPtoJS.alerts.pays);
	}
	if ( myForm.cp.value.length < 4 )
	{
		errors.push(fromPHPtoJS.alerts.cp);
	}
	if ( myForm.ville.value.length < 2 )
	{
		errors.push(fromPHPtoJS.alerts.ville);
	}
	if ( myForm.tel.value.length >0 && !patterns.tel.test(myForm.tel.value) )
	{
		errors.push(fromPHPtoJS.alerts.tel);
	}
	if ( myForm.pseudo.value.length < 4 )
	{
		errors.push(fromPHPtoJS.alerts.login);
	}
	if ( myForm.imgContent.value !== fromPHPtoJS.captchas[fromPHPtoJS.imgNr] )
	{
		errors.push(fromPHPtoJS.alerts.img);
	}
 
	if (errors.length >0)
	{
		errorsDiv.style.backgroundColor = '#FFFF99';
		errorsDiv.style.color = 'red';
		errorsDiv.style.padding = '3px 5px';
		for (let i=0, max=errors.length; i<max; i++)
		{
			let 
				errorTxt	= document.createTextNode( errors[i] ),
				p			= document.createElement( 'p' );
			p.style.margin = '.3rem';
			errorsDiv.appendChild( p );
			p.appendChild( errorTxt );
		}
		e.preventDefault();
	}
	else {
		errorsDiv.style.backgroundColor = 'transparent';
		errorsDiv.appendChild( textes[0] );
	}
}, false );

Question subsidiaire: Pourquoi lorsque j'affiche le code source, le DOM ajouté par javascript n'apparaît pas. Il semblerait que le navigateur (IE11) n'envoie que la partie transmise par le serveur.

**badaze** · 28/12/2018, 15h53

Qu'est-ce qui se répète ? Des exemples ?

Pour la question subsidiaire. Il faut que tu cliques sur l'onglet Explorateur DOM pour voir le contenu "réel/actuel" de la page.

C'est normal de ne voir que le source initial car c'est ce qui est exécuté par le navigateur et tout ce qui est généré dynamiquement ensuite n'y figure pas explicitement et s'y agglomère non pas dans le source mais au niveau du DOM de la page.

**moimp** · 28/12/2018, 17h25

A chaque clic sur le bouton submit, les nouveaux messages d'erreur s'ajoutent aux anciens. Si je ne modifie aucun champ et que je clique 3 fois sur submit, j'ai 3 fois les mêmes messages d'erreur dans mon div comme ceci:

Code :

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

1
2
3
4
5
6
7
 
Le nom de la ville est trop court.
Le pseudo doit comporter au moins 4 caractères.
Le nom de la ville est trop court.
Le pseudo doit comporter au moins 4 caractères.
Le nom de la ville est trop court.
Le pseudo doit comporter au moins 4 caractères.

**badaze** · 28/12/2018, 17h41

C'est normal.

Tu crées des nœuds à chaque fois donc ça s'ajoute. Il faudrait qu'au début de la fonction tu aies du code qui efface le conteneur des messages d'erreur.

**moimp** · 28/12/2018, 18h58

C'est justement ce que je n'arrive pas à faire (ligne 36). Lors de mon premier message, j'utilisais le même conteneur pour les erreurs PHP et les erreurs JS. J'ai donc créé deux conteneurs. Le conteneur PHP (avec l'id 'errPHP' qui fait partie du code PHP et que je ne touche pas ici. J'ai donc réecrit mon code comme ceci.

Code javascript :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
"use strict";
 
// Déclaration des constantes
//###########################
 
console.log(fromPHPtoJS.alerts);
const
	myForm		= window.document.querySelector('form'),
	article		= window.document.querySelector('#right'),
	pseudoInput	= window.document.querySelector('#pseudo'),
	info		= window.document.querySelector('.info'),
	errorsDiv	= window.document.querySelector('#errorsDiv'),
	errPHP		= window.document.querySelector('#errPHP'),
	errJS		= window.document.createElement('div'),
	pseudos		= fromPHPtoJS.pseudos;
 
const textes = [
	document.createTextNode(""),
	document.createTextNode(fromPHPtoJS.alerts.pseudo[0]), // Ce pseudo existe déjà, cherchez en un autre.
	document.createTextNode(fromPHPtoJS.alerts.pseudo[1])  // Le pseudo ne peut pas commencer par un chiffre.
];
 
const patterns = {
	nom:	/^(de |d'|von |van |l')?[A-ZÀÁÂÆÇÈÉÊËÌÍÎÏÑÒÓÔŒÙÚÛÜÝŸ][a-zA-Zàéèêëîïôöûüùç]+([' -](de |d'|von |van )?[A-Z][a-zA-Zàéèêëîïôöûüùç]+)?[a-zA-ZàéèêëîïôöûüùçÀÁÂÆÇÈÉÊËÌÍÎÏÑÒÓÔŒÙÚÛÜÝŸ]$/,
	prenom:	/^[A-ZÀÁÂÆÇÈÉÊËÌÍÎÏÑÒÓÔŒÙÚÛÜÝŸ][a-zA-Zàáâæäßçéèêëìíîïñòóôöœùúûüýÿ.]?([. -][A-ZÀÁÂÆÇÈÉÊËÌÍÎÏÑÒÓÔŒÙÚÛÜÝŸ][a-zA-Zàáâæäßçéèêëìíîïñòóôöœùúûüýÿ.])?/,
	courriel:	/^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/i,
	tel:	/^\+[1-9][0-9]{9,}$/
};
 
// Contrôle de saisie avant envoi
//###############################
 
myForm.addEventListener('submit', function(e) {
	let errors = [];
	console.log(errJS); // renvoie <div></div>
	//article.removeChild(errJS); // provoque une erreur "NotFoundError"
 
	if ( myForm.gender.value === '' )
	{
		errors.push(fromPHPtoJS.alerts.civilite);
	}
	if ( myForm.nom.value.length < 2 || !patterns.nom.test(myForm.nom.value) )
	{
		errors.push(fromPHPtoJS.alerts.nom);
	}
 
	// autres conditions de contrôle
 
 
	if ( errors.length >0 )
	{
		// Insertion et paramètrage du div d'erreur JS
		article.insertBefore(errJS, errPHP);
		errJS.style.backgroundColor = '#FFFF99';
		errJS.style.color	= 'red';
		errJS.style.padding	= '3px 5px';
		// Affichage des erreurs JS
		for (let i=0, max=errors.length; i<max; i++)
		{
			let errorTxt	= document.createTextNode( errors[i] ),
				p			= document.createElement( 'p' );
 
			p.style.margin	= '.3rem';
			errJS.appendChild( p );
			p.appendChild( errorTxt );
		}
		e.preventDefault();
	}
}, false );

**Beginner.** · 28/12/2018, 19h52

Ben si on reprend le premier code qui est plus simple eh bien tu avais juste à vider la div "errorsDiv" comme te l'a suggéré badaze...

Tu peux faire au début de ta fonction : errorsDiv.innerHTML = "";...

C'est simple et rapide mais si tu veux un solution propre utilisant les méthodes du DOM eh bien cela est possible...

**badaze** · 28/12/2018, 19h53

Je ne me prendrais pas le chou. Je me ferais un div dans lequel je mettrais les messages d'erreur via la propriété innerHTML.

Code :

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

1
2
3
4
5
6
7
8
...
document.getElementById('monDiv').innerHTML = '';
...
for (let i=0, max=errors.length; i<max; i++)
{
   document.getElementById('monDiv').innerHTML = document.getElementById('monDiv').innerHTML + '<p>' +  errors[i] + '</p>';
}

**moimp** · 29/12/2018, 10h19

C'est vrai que selon ton expression, je me prends souvent le chou. J'ai l'habitude d'utiliser le DOM2 et je cherchais naturellement une solution en DOM2. Du coup, j'ai laissé la boucle en l'état mais j'ai utilisé ton exemple pour l'effacement du div.
Merci.

Gestion des erreurs:les messages se répètent

JavaScript

Discussions similaires

Partager

Partager