Gestion des erreurs:les messages se répètent
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:
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:
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.
