Discussion :

[elle-même]

Bonjour,

J'ai un problème pour valider plusieurs champ d'un formulaire. Il s'agit d'un site de commande sur intenret. Donc j'ai des champs pour le nom, l'adresse, le numéro de téléphone et le code postal du client.

Dans mes fonctions lorsque que je valide un seul champ tout fonctionne. Quand j'essai de valider plusieurs champs rien ne fonctionne plus. Je crois que j'ai de la difficulté dans l'ordre d'écriture des instructions.

Le code suivant son mes 2 fonction pour la validation et l'affichage. Les alert sont uniquement pour vérifier ou on se rend.

Pouvez-vous m'aider à trouver l'ordre des instructions pour valider tout mes champs et inscrire les messages d'erreur à coté du bon champ dans mon formulaire

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
39
40
41
42
43
function validationFormulaire() {
 
   this.lire();  // lecture des valeurs sur le formulaire
   alert("Nous sommes dans la fonction de validation pour "+this.tel);
   alert("Nous sommes dans la fonction de validation pour "+this.codePostal);
 
   var val_tel = new RegExp("([0-9]{3})[0-9]{3}-[0-9]{4}");
   // exemple d'affichage d'erreur:
   if (val_tel.test(this.tel))
     {
     alert("bravo");
     return true;
     }
   else
       {
        this.affErreur( "telephone", "Erreur numero de téléphone invalide");
        return false;
       }
 
   alert("Nous sommes dans la fonction de validation pour "+this.codePostal);
   var val_codep = new RegExp("[A-Za-z][0-9][A-Za-z] ?[0-9][A-Za-z][0-9]");
   // exemple d'affichage d'erreur:
   if (val_codep.test(this.codep))
     {
     alert("bravo");
     return true;
     }
   else
      {
        this.affErreur( "codePostal", "Erreur code postal invalide");
        return false;
       }
}
 
function afficheErreurFormulaire( nomChamp, message ) {
   var affichage;
   affichage = document.getElementById("err_telephone"+this.endroitID);
   affichage.innerHTML = message;
 
   var affichage;
   affichage = document.getElementById("err_codePostal"+this.endroitID);
   affichage.innerHTML = message;
}

Merci à l'avance

[le_chomeur]

le problème , c'est qu'en faisant ton return dans ton if/else, tu n'atteindras pas la suite du code exemple :alert("Nous sommes dans la fonction de validation pour "+this.codePostal); ) car tu seras déja sortis , place un boléan que tu test a la fin de ta méthode plutot

[elle-même]

Merci pour la réponse, mais je ne suis pas certaine de voir ou placer un boolean. En fait le javascript c'est pas mal nouveau pour moi.

[le_chomeur]

Je vois également que tu utilises un objet ( puisque tu fais référence a this.lire() ) mais je ne vois null part cette méthode , aurais tu un lien ou ta page complète ?

pour ton bouléen je te donne l'algo :

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
 
var erreur = false ;
var msgErreur = "";
 
if(montest1 = true)
{
erreur = true;
msgErreur += "veuillez remplir le champs X \n";
}
 
 
if(montest2 = true)
{
erreur = true;
msgErreur += "veuillez remplir le champs X";
}
 
if(erreur)
{
alert(msgErreur);
}

et tu peux retourner erreur a l'extérieur du dernier if ...

[elle-même]

Bonjour,

Merci pour l'aide, mais j'ai vraiment de la difficulté avec cette partie de validation. Je n'arrive toujours pas à valider plusieurs champs même avec le boolean.

Voici mon javascript externe au complet. J'espère que quelqu'un pourra m'aider.

Merci

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
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
 
//Constructeur de la classe
function Personne (endroit) {
var paragraphe = document.getElementById(endroit);
var code = '<table border="0" width="100%" id="table1" bgcolor="#C0C0C0">';
code += '<tr>';
code += ' <td width="16%">Téléphone:</td>';
code += ' <td width="82%"> <input type="text" name="telephone' + endroit + '" size="20">';
code += ' <span style="color:red" id="err_telephone' + endroit + '"></span></td>';
code += '</tr>';
code += '<tr>';
code += ' <td width="16%">Code postal:</td>';
code += ' <td width="82%"> <input type="text" name="codePostal' + endroit + '" size="20">';
code += ' <span style="color:red" id="err_codePostal' + endroit + '"></span></td>';
code += '</tr>';
code += '</table>';
paragraphe.innerHTML=code;
 
this.valide = validationPersonne;
this.affiche = affichePersonne;
this.lire = lirePersonne;
this.affErreur = afficheErreurFormulaire;
this.detruire = detruirePersonne;
this.endroitID = endroit;
this.nom = "";
this.adresse = "";
this.ville = "";
this.tel = "";
this.codep = "";
}
 
function lirePersonne( ) {
var formulaire = document.getElementsByTagName("form")[0];
with (formulaire) {
this.nom = elements["nom"+this.endroitID].value;
this.adresse = elements["adresse"+this.endroitID].value;
this.ville = elements["ville"+this.endroitID].value;
this.tel = elements["telephone"+this.endroitID].value;
this.codep = elements["codePostal"+this.endroitID].value;
}
}
 
function affichePersonne() {
alert("Affichage de la personne: "+this.nom+ "\nAdresse:" + this.adresse + "\nVille:" + this.ville +
"\nTelephone:" + this.tel + "\nCode Postal:" + this.codep);
}
 
function validationPersonne() {
this.lire(); // lecture des valeurs sur le formulaire
alert("Nous sommes dans la fonction de validation pour "+this.tel);
alert("Nous sommes dans la fonction de validation pour "+this.codePostal);
 
var val_tel = new RegExp("([0-9]{3})[0-9]{3}-[0-9]{4}");
if (val_tel.test(this.tel))
{
alert("bravo");
return true;
}
else
{
this.affErreur( "telephone", "Erreur numero de téléphone invalide");
return false;
}
 
alert("Nous sommes dans la fonction de validation pour "+this.codePostal);
var val_codep = new RegExp("[A-Za-z][0-9][A-Za-z] ?[0-9][A-Za-z][0-9]");
if (val_codep.test(this.codep))
{
alert("bravo");
return true;
}
else
{
this.affErreur( "codePostal", "Erreur code postal invalide");
return false;
}
}
 
function afficheErreurFormulaire( nomChamp, message ) {
var affichage;
affichage = document.getElementById("err_telephone"+this.endroitID);
affichage.innerHTML = message;
 
var affichage;
affichage = document.getElementById("err_codePostal"+this.endroitID);
affichage.innerHTML = message;
}

En passant j'ai enlevé de bout du constructeur c'était un peux lourd comme code.

[le_chomeur]

a cet endroit :

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
 
 
var DesErreurs = false ;
var ListeErreurs = "";
alert("Nous sommes dans la fonction de validation pour "+this.tel);
alert("Nous sommes dans la fonction de validation pour "+this.codePostal);
 
var val_tel = new RegExp("([0-9]{3})[0-9]{3}-[0-9]{4}");
if (val_tel.test(this.tel))
{
   alert("bravo");
}
else
{
ListeErreurs += "telephone", "Erreur numero de téléphone invalide";
DesErreurs = false;
}
 
alert("Nous sommes dans la fonction de validation pour "+this.codePostal);
var val_codep = new RegExp("[A-Za-z][0-9][A-Za-z] ?[0-9][A-Za-z][0-9]");
if (val_codep.test(this.codep))
{
alert("bravo");
}
else
{
ListeErreurs  += "codePostal", "Erreur code postal invalide";
DesErreurs = false;
}
 
 
//et ici tu fais ton test sur le booleen que je t'ai donné plus haut :)
}