Verifcation & Validation de formulaire

**Laudenia** · 30/05/2008, 12h17

Bonjour j'ai codé un formulaire ainsi que sa vérification, et maintenant que j'ai fini lorsque je clique sur soumettre le vérification ne se fait pas :o Personnellement j'ai lu et relu mais je ne trouve pas mon erreur donc j'espérais qu'un œil extérieur pourrait m'aider

Voici la code de ma page html :

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
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Quentin Simon" /> 
<link rel="icon" type="type/gif" href="favicon.gif" />
<title>.: Cidre Simon :. Bienvenue à la fête</title>
<style type="text/css" media="screen">
<!--
@import url("css/styles.css");
-->
</style>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/utils/backgroundslider.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
<script type="text/javascript" src="js/validation.js"></script>
<script type="text/javascript">
	function fct_validate(frm) {
		var nom = frm.nom;
		var prenom = frm.prenom;
		var rue = frm.rue;
		var numero = frm.numero;
		var ville = frm.ville;
		var telephone = frm.telephone;
		var email = frm.email;
		var cp = frm.cp;
 
		//Validation du nom : il est obligatoire
		if(fct_is_not_empty(nom) == false {
			//Le champ est vide : fin de la procédure
			fct_message(nom,"Le nom est obligatoire !");
			return false;
		}
		//Validation du prénom : il est obligatoire
		if(fct_is_not_empty(prenom) == false {
			//Le champ est vide : fin de la procédure
			fct_message(prenom,"Le prénom est obligatoire !");
			return false;
		}
 
		//Validation de la rue : elle est obligatoire
		if(fct_is_not_empty(rue) == false {
			//Le champ est vide : fin de la procédure
			fct_message(rue,"La rue est obligatoire !");
			return false;
		}
 
		//Validation du numéro : il est obligatoire et doit correspondre à un chiffre
		if(fct_is_not_empty(numero) == false {
			//Le champ est vide : fin de la procédure
			fct_message(numero,"Le numero est obligatoire !");
			return false;
		} else {
			//Test afin de déterminer si c'est bien un nombre
			if(fct_is_number(numero) == false {
				fct_message(numero,"Votre numéro de maison doit être un nombre !");
				return false;
			}
		}
		//Validation de la ville : elle est obligatoire
		if(fct_is_not_empty(ville) == false {
			//Le champ est vide : fin de la procédure
			fct_message(ville,"La ville est obligatoire !");
			return false;
		}
		//Validation du code postal : il est obligatoire
		if(fct_is_not_empty(cp) == false {
			//Le champ est vide : fin de la procédure
			fct_message(cp,"Le code postal est obligatoire !");
			return false;
		} else {
				//Test afin de déterminer si c'est bien un nombre
				if(fct_is_number(cp) == false {
					fct_message(cp,"Votre code postal doit être une suite de 4 chiffres !");
					return false;
				}
		//Validation du numéro de téléphonne
		//Test afin de déterminer si c'est bien un nombre
		if(fct_is_number(telephone) == false {
			fct_message(telephone,"Votre numéro de téléphone doit être en chiffre sans autres caractères !");
			return false;
			}
		//Validation de l'email : il est obligatoire
		if(fct_is_not_empty(email) == false {
			//Le champ est vide : fin de la procédure
			fct_message(email,"L'email est obligatoire !");
			return false;
		} else {
				//Test de la validité de l'email
				if(fct_is_email(email) == false) {
					fct_message(email,"Le format de l'email n'est pas correcte !");
					return false;
				}
		}
 
		//Si tous les tests ont aboutis: on peut envoyer le formulaire
		alert("Validation effectuée avec succès")
		frm.submit();
	}
</script>
</head>
 
<body>
    <div id="wrap">
        <div id="content">
            <div id="example">
                <div id="slideshowContainer" class="slideshowContainer"></div>
                <div id="subheader">
                    <div id="thumbnails">
                    <a href="images/Image1.jpg" class="slideshowThumbnail"><img src="images/square.png" alt="Vignette 1"/></a>
                    <a href="images/Image2.png" class="slideshowThumbnail"><img src="images/square.png" alt="Vignette 2"/></a>
                    <a href="images/Image3.png" class="slideshowThumbnail"><img src="images/square.png" alt="Vignette 3"/></a>
                    <a href="images/Image4.png" class="slideshowThumbnail"><img src="images/square.png" alt="Vignette 4"/></a>
                    <!--
                    <a href="#" onclick="show.stop(); return false;">Stop</a> |
                    <a href="#" onclick="show.previous(); return false;">Précédent</a> |
                    <a href="#" onclick="show.play(); return false;">Play</a> |
                    <a href="#" onclick="show.next(); return false;">Suivant</a>   -->
 
                    </div>
                </div>
				<script type="text/javascript">
					window.addEvent('domready',function(){
					var obj = {
					wait: 3000, 
					effect: 'fade',
					duration: 1000, 
					loop: true, 
					thumbnails: true,
					backgroundSlider: true,
					onClick: function(i){alert(i)}
					}
					show = new SlideShow('slideshowContainer','slideshowThumbnail',obj);
					show.play();
					});
                </script>
            </div>
            <div id="forumulaire">
             <form name="Inscription" method="post" action="#">
                 <fieldset id="infos">
                    <legend>Formulaire d inscription</legend>
                    <ul>
                    	<li class="sexe">
                            <label for="mm">Mme</label>
                            <input type="radio" value="madame" name="sexe"  />	
                        </li>
					    <li class="sexe">
                            <label for="mr">Mr</label>
    						<input type="radio" value="monsieur" name="sexe"  />
					    </li>					
 
						<li id="nom">
                            <label for="nom">Nom:</label>
                            <input type="text" name="nom" size="25" maxlength="25"  />
						</li>
 
                        <li id="prenom">
                            <label for="prenom">Prénom:</label>
                            <input type="text" name="prenom" size="25" maxlength="25"  />
                        </li>
 
                        <li id="rue">
                            <label for="rue">Rue:</label>
                            <input type="text" name="rue" size="25" maxlength="100" />
                        </li>
 
                        <li id="numero">
                            <label for="numero">Numéro:</label>
                            <input type="text" name="numero" size="4" maxlength="10" />
                        </li>
						<li id="cp">
                            <label for="cp">Code Postal:</label>
                            <input type="text" name="cp" size="4" maxlength="4" />
                        </li>
                        <li id="ville">
                            <label for="ville">Ville:</label>
                            <input type="text" name="ville" size="25" maxlength="100"  />
                        </li>
                        <li id="telephone">
                            <label for="telephonne">Code Postal:</label>
                            <input type="text" name="telephonne" size="10" maxlength="10" />
                        </li>
						<li id="email">
                            <label for="email">E-Mail:</label>
                            <input type="text" name="email" size="25" maxlength="100" />
                        </li>
                        <li id="abonnement_postal"> 
                        	<input type="checkbox" name="pub_postal" /> 
                            <label for="abonnement_postal">Je suis d accords de recevoir des avis promotionnels de la part de la marque Simon dans ma boîte aux lettres.</label>
                        </li>
            			<li id="abonnement_mail">
                        	<input type="checkbox" name="pub_mail" /> 
                            <label for="abonnement_mail">Je suis d accords de recevoir des avis promotionnels de la part de la marque Simon sur ma boîte e-mail.</label>
                        </li>
                    </ul>
             		<input type="submit" name="validation" value="Envoyer" onClick= "fct_validate(this.form);" />
             		<input type="reset" name="reset" value="Reset"  />
		</fieldset>
             </form>
        	</div>
        </div>
        <div id="sommaire">
            <object type ="application/x-shokwave-flash" data="menu.swf" width="150" height="200">
                <param name="movie" value="menu.swf" />
                <param name="wmode" value="transparent" />
                <ul>
                	<li></li>
                </ul>
            </object>
 
        </div>
        <div id="footer">
        	<ul>
            	<li><a href="lieux.html">Où nous trouver</a></li>
                <li><a href="inscription.html">S'inscrire</a></li>
            </ul>
        	<p>Tous droits réservés ©2008 Copyright Quentin Simon.</p>
        </div>
	</div>
</body>
</html>

Et celui du fichier validation.js

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
//Fonction qui affiche le message d'erreur et donne le focus au champ concerné
function fct_message(fld,msg) {
		alert("Une erreur a été détectée : \n" + msg);
		fld.focus();
}
 
//Fonction de vérification du format d'un email
function fct_is_email(fld) {
	str = fld.value;
	exp = new RegExp("^[A-Za-z0-9\.\-_]+@[A-Za-z0-9\.\-_]+$", "g");
	if(exp.test(str)) {
			return true;
	} else {
			return false;
	}
}
 
//Fonction de vérification d'un nombre
function fct_is_number(fld) {
	if(isNan(fld.value) == true) {
		return false;
	} else {
		return true;
	}
}
 
//Fonction d'une vérification de la présence d'une valeur
function fct_is_not_empty(fld) {
	if(fld.value.length > 0) {
		//le champ n'est pas vide
		//il faut tester caractère par caractère si le champ contient autrechose que des espaces blancs
		var nonwhitespace = 0;
		var c;
		for (i = 0; i < fld.value.length; i++) {
			c = fld.value.charAt(i);
			if c.indexOf(" ") == -1) {
				nonwhitespace++;
			}
		}
		if(nonwhitespace < 0) {
			//le champ ne contient pas que des espaces blancs
			return true;
		} else {
			//le champ ne contient que des espaces blancs
			return false;
		}
	}else {
		//le champ est vide
		return false;
	}
}

Merci d'avance de vos réponses =)

**SpaceFrog** · 30/05/2008, 13h25

Une petite recherche t'aurait mené là ...
http://www.developpez.net/forums/sho...d.php?t=557868

**tusssss** · 30/05/2008, 13h42

En gros

input submit et onclick

Faut mettre un onsubmit sur le form avec un appel à ta fonction sous forme "return ta_fonction()"

**Laudenia** · 30/05/2008, 14h34

Envoyé par SpaceFrog

Une petite recherche t'aurait mené là ...
http://www.developpez.net/forums/sho...d.php?t=557868

Pas forcément puisque je ne savais pas où se situait l'erreur ca aurait pu être là comme autre part d'autre...

En tout cas merci pour vos réponses, je vais essayer ça de suite

EDIT : L'erreur ne venait pas de cela...Le fait est que même avec les champs vides il me valide le formulaire alors qu'il ne devrait pas.

Pour que vous puissiez mieux vous en rendre compte voici le lien vers où la page est hebergée : http://quentin-simon.heaj.be/TFA/inscription.html

**Jumano** · 31/05/2008, 08h19

Bonjour,
Aide toi de la console d'erreur dans Firefox :
2 erreurs trouvées :
Dans le fichier Validation.js = il manque une "(" entre "if" et "c.indexOf"

Code :

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

if (c.indexOf(" ") == -1) {

Dans la page inscription.html :
Tu ouvres les "(" mais tu ne les fermes pas :

Code :

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

if(fct_is_not_empty(nom) == false) {

Et cela pour chaque champs que tu testes ...

**SpaceFrog** · 01/06/2008, 20h34

Code :

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

EDIT : L'erreur ne venait pas de cela...Le fait est que même avec les champs vides il me valide le formulaire alors qu'il ne devrait pas.

Heu tu as été voir le topo sur la soumission de formulaire ?

ton problème est que si il valide malgré le test soit le test n'est pas bon (pas capable de vérifier si le champs est vide) soit le return n'est pas bon (il retourne true quand le champs est vide au lieu de false), un point c'est tout !

Verifcation & Validation de formulaire

JavaScript

Vue hybride

Discussions similaires

Partager

Partager