Afficher 2 messages d'erreur [Résolu]

isitien · 23/02/2011, 14h39

Bonjour,

J'ai rencontre 2 probleme lors de la verification d'un formulaire:

+ J'aimerais afficher un message d'erreur et une image avec la fonction keyup au meme endroit,
+ Quand le champ est valide et je continue a saisir plus de caracteres, ca continue toujours l'action fadeIn.

voila le code

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
 
<script type="text/javascript">
$(document).ready(function(){
 
$("#name").keyup(function(){
 
	if ($("#name").val() == '')
	{
		// Afficher l'image error ainsi que le message d'erreur
		$("#msgbox").fadeIn("normal").html('<img src="error.png" width="20" height="20" 
 
align="absmiddle">');
		$("#msgbox").text('Le nom est vide').fadeIn("slow");
	}
 
	else if ($("#name").val().length < '5')
	{	
		// Afficher l'image error ainsi que le message d'erreur 
		$("#msgbox").fadeIn("normal").html('<img src="error.png" width="20" height="20" 
 
align="absmiddle">');
		$("#msgbox").text('Le nom est trop court').fadeIn("slow");
	}
 
 
	else
	{
		// on change les proprietes CSS
	$("#name").css( 
			"border-color", "#badfac",
		  	"border-width", "1px"
			  );
 
		// on enleve le message d'erreur ainsi que l'image error
		$("#msgbox").fadeOut("fast").text();
		$("#msgbox").fadeOut("fast").html('<img src="error.png" width="20" height="20" 
 
align="absmiddle">');
 
		// on insere l'image success
		$("#msgbox").fadeIn("normal").html('<img src="success.png" width="20" 
 
height="20" align="absmiddle">');
 
		// on active le boutton d'envois
		$("#send").removeAttr('disabled');
 
  }
 
	});
  });
 
 
 
</script>

Merci

isitien · 02/03/2011, 04h24

La partie du else if ne marche pas:

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
 
<html dir="rtl">
<head>
<style type="text/css">
em {
	display: none;
}
 
#name, #username, #email {
	border-color: #FF0000;
	border-style: solid;
	border-width: 1px;
	border-collapse: collapse;
 
}
 
#label01 {
	width: 100px;
	display:block;
	float: right;
}
 
.frm_fields {
	padding: 5px;
}
 
input:focus {
      background: #fc9fff;   
}
 
.CurFocus {
background: #fdecb2;
width: 800px;
}
 
.info {
}
 
 
.info2 {
	background:url(info.png) no-repeat right;
}
 
 
</style>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>
 
<script type="text/javascript">
$(document).ready(function(){
 
//$("input #frm_login").focus(function(){ // quand on met la souris au input de la form frm_login
$("#frm_login :text").focus(function(){ // quand on met la souris au input de la form frm_login
 
	$(this).parent().addClass('CurFocus'); // on ajoute le CurFocus a frm_fields afin de combiner les 2 class
	$(this).parent().find('.info').html('&nbsp;&nbsp;<img src="info.png" width="20" height="20" align="absmiddle"> Message ici'); // on cherche info afin d'ajouter le code HTML
	$(this).parent().find('.eMsg').html(''); // on ecrase le message d'erreur
	$(this).parent().find('.sMsg').html(''); // on ecrase le message de success
 
 
 
					}).blur(function(){ // quand on met la souris au input de la form frm_login
	$(this).parent().removeClass('CurFocus'); // on ajoute le CurFocus a frm_fields afin de combiner les 2 class
	$(this).parent().find('.info').html(''); // on cherche info afin de l'ecraser et la vider
 
 
 });
 
 
 
$("#frm_login :text").blur(function(){
 
 
	if ($("#name").val().length < '5')
	{
 
		$(this).parent().find('.eMsg').html('<img src="error.png" width="20" height="20" align="absmiddle"> Le nom comporte moins de 5 caracteres!');
		$(this).parent().find('#name').css( 
			"border-color", "#FF0000",
		  	"border-width", "1px"
			  );
 
	}
 
 
	else if ($("#username").val().length < '5')
	{
 
		$(this).parent().find('.eMsg').html('<img src="error.png" width="20" height="20" align="absmiddle"> Le pseudo comporte moins de 5 caracteres!');
		$(this).parent().find('#username').css( 
			"border-color", "#FF0000",
		  	"border-width", "1px"
			  );
 
	}
 
 
	else
	{
		$(this).parent().find('.sMsg').html('<img src="success.png" width="20" height="20" align="absmiddle">');
		$(this).parent().find('#name').css( 
			"border-color", "#badfac",
		  	"border-width", "1px"
			  );
 
	  	$(this).parent().find('#username').css( 
			"border-color", "#badfac",
		  	"border-width", "1px"
			  );
 
 
		$("#send").removeAttr('disabled');	
 
	}
 
 
//remove all the class add the messagebox classes and start fading
 
 //check the username exists or not from ajax
 
 return false;	
 });
 
 });
 
 
 
</script>
 
 
</head>
<body>
<?php
include 'site_vars.php';
 
    echo '<form name="frm_login" id="frm_login" action="#" method="POST">';
    echo '<div class="frm_fields">';
    echo '<label for="name" id="label01">'.$name_var.'</label>';
    echo $name_input;
    echo '<span class="info"></span>'; // pour afficher les infos
    echo '<span class="eMsg"></span>'; // en cas d'erreur
    echo '<span class="sMsg"></span>'; // en cas de success
    echo '</div>';
 
    echo '<div class="frm_fields">';
    echo '<label for="username" id="label01">'.$username_var.'</label>';
    echo $username_input;
    echo '<span class="info"></span>'; // pour afficher les infos
    echo '<span class="eMsg"></span>'; // en cas d'erreur
    echo '<span class="sMsg"></span>'; // en cas de success
    echo '</div>';
 
    echo '<div class="frm_fields">';
    echo '<label for="email" id="label01">'.$email_var.'</label>';
    echo $email_input;
    echo '<span class="info"></span>'; // pour afficher les infos
    echo '<span class="eMsg"></span>'; // en cas d'erreur
    echo '<span class="sMsg"></span>'; // en cas de success
    echo '</div>';
 
    echo '</span>';
 
    echo $submit_var;
 
    echo '</form>';
?>
 
</body>
</html>

SpaceFrog · 02/03/2011, 08h21

ce genre de selecteur m'intrigue toujours:

Code :

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

$("#frm_login :text")

il sert à quoi le :text ?

isitien · 02/03/2011, 12h11

Citation:

Envoyé par SpaceFrog

ce genre de selecteur m'intrigue toujours:

Code :

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

$("#frm_login :text")

il sert à quoi le :text ?

Je l'ai trouve sur un forum, en disant que c'est le selector qui remplace input[type="text"]

SpaceFrog · 02/03/2011, 13h20

ha oki les inputs text du form

Samolo · 02/03/2011, 23h58

Bonjour,

Il y a un problème avec ce morceau de code il ne teste en aucun cas si username et name ont tout les 2 moins de 5 lettres.

Donc tout à fait normal qu'il ne mette pas 2 messages d'erreur si l'utilisateur a moins de 5 lettre pour ces 2 champs.

Modifier le 'else if' en 'if' devrait résoudre le problème

isitien · 03/03/2011, 02h28

Citation:

Envoyé par SpaceFrog

ha oki les inputs text du form

oui tout a fait.

Citation:

Envoyé par Samolo

Bonjour,

Il y a un problème avec ce morceau de code il ne teste en aucun cas si username et name ont tout les 2 moins de 5 lettres.

Donc tout à fait normal qu'il ne mette pas 2 messages d'erreur si l'utilisateur a moins de 5 lettre pour ces 2 champs.

Modifier le 'else if' en 'if' devrait résoudre le problème

Je peux le faire, mais j'aimerais tester que si tout va bien, on active le bouton d'envois sinon on affiche les messages d'erreur correspondants, avec if if if et else, ca va pas marcher:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
if condition 1
do something
 
if condition 2
do something
 
if condition 3
do something
 
else
do another thing

le else ici va suivre la condition 3

isitien · 03/03/2011, 05h19

J'ai mis ce code, le seul soucis que j'ai est: si une personne remplis toutes les informations correctement, le boutton submit s'active, alors s'il retourne et change par exemple son pseudo a moins de 5 caracteres, le boutton submit reste toujours actif:

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
 
<html dir="rtl">
<head>
<style type="text/css">
em {
	display: none;
}
 
#name, #username, #email {
	border-color: #FF0000;
	border-style: solid;
	border-width: 1px;
	border-collapse: collapse;
 
}
 
#label01 {
	width: 100px;
	display:block;
	float: right;
}
 
.frm_fields {
	padding: 5px;
}
 
input:focus {
      background: #fc9fff;   
}
 
.CurFocus {
background: #fdecb2;
width: 800px;
}
 
.info {
}
 
 
.info2 {
	background:url(info.png) no-repeat right;
}
 
 
</style>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>
 
<script type="text/javascript">
$(document).ready(function(){
 
//$("input #frm_login").focus(function(){ // quand on met la souris au input de la form frm_login
$("#frm_login :text").focus(function(){ // quand on met la souris au input de la form frm_login
 
	$(this).parent().addClass('CurFocus'); // on ajoute le CurFocus a frm_fields afin de combiner les 2 class
	$(this).parent().find('.info').html('&nbsp;&nbsp;<img src="info.png" width="20" height="20" align="absmiddle"> Message ici'); // on cherche info afin d'ajouter le code HTML
	$(this).parent().find('.eMsg').html(''); // on ecrase le message d'erreur
	$(this).parent().find('.sMsg').html(''); // on ecrase le message de success
 
 
 
					}).blur(function(){ // quand on met la souris au input de la form frm_login
	$(this).parent().removeClass('CurFocus'); // on ajoute le CurFocus a frm_fields afin de combiner les 2 class
	$(this).parent().find('.info').html(''); // on cherche info afin de l'ecraser et la vider
 
 
 });
 
 
	// on determine des variables pour les inputs
	var frm_login = $("#frm_login :text");
	var name = $("#name");
	var username = $("#username");
	var email = $("#email");
 
 
	// on procede a la verification des champs
	// Nom
	function check_name () {
 
		if (name.val().length < 5)
		{
			$(this).parent().find('.eMsg').html('<img src="error.png" width="20" height="20" align="absmiddle"> Le nom comporte moins de 5 caracteres!');
		$(this).parent().find('#name').css( 
			"border-color", "#FF0000",
		  	"border-width", "1px"
			  );
 
			return false;
		}
		else
		{	
			$(this).parent().find('.sMsg').html('<img src="success.png" width="20" height="20" align="absmiddle">');
		$(this).parent().find('#name').css( 
			"border-color", "#badfac",
		  	"border-width", "1px"
			  );
			return true;
		}
	}
 
 
 
		// Username
	function check_username () {
 
		if (username.val().length < 5)
		{
			$(this).parent().find('.eMsg').html('<img src="error.png" width="20" height="20" align="absmiddle"> Le pseudo comporte moins de 5 caracteres!');
		$(this).parent().find('#username').css( 
			"border-color", "#FF0000",
		  	"border-width", "1px"
			  );
 
			return false;
		}
		else
		{	
			$(this).parent().find('.sMsg').html('<img src="success.png" width="20" height="20" align="absmiddle">');
		$(this).parent().find('#username').css( 
			"border-color", "#badfac",
		  	"border-width", "1px"
			  );
			return true;
		}
	}
 
	// on blur function sur chaque champs
	// on a deja remplace le $("#") par leurs variables
 
	//name.blur(function(valid_name){
	name.blur(check_name); // verification on blur de la fonction check_name sur le champs name
	username.blur(check_username);
 
 
  frm_login.blur(function() {
 
 	if ((check_name()) & (check_username()))
 	{
 		$("#send").removeAttr('disabled');
 	}
 
 });
 
 
 }); // end DOM function
 
 
 
 
 
 
 
 
 
 
</script>
 
 
</head>
<body>
<?php
include 'site_vars.php';
 
    echo '<form name="frm_login" id="frm_login" action="#" method="POST">';
    echo '<div class="frm_fields">';
    echo '<label for="name" id="label01">'.$name_var.'</label>';
    echo $name_input;
    echo '<span class="info"></span>'; // pour afficher les infos
    echo '<span class="eMsg"></span>'; // en cas d'erreur
    echo '<span class="sMsg"></span>'; // en cas de success
    echo '</div>';
 
    echo '<div class="frm_fields">';
    echo '<label for="username" id="label01">'.$username_var.'</label>';
    echo $username_input;
    echo '<span class="info"></span>'; // pour afficher les infos
    echo '<span class="eMsg"></span>'; // en cas d'erreur
    echo '<span class="sMsg"></span>'; // en cas de success
    echo '</div>';
 
    echo '<div class="frm_fields">';
    echo '<label for="email" id="label01">'.$email_var.'</label>';
    echo $email_input;
    echo '<span class="info"></span>'; // pour afficher les infos
    echo '<span class="eMsg"></span>'; // en cas d'erreur
    echo '<span class="sMsg"></span>'; // en cas de success
    echo '</div>';
 
    echo '</span>';
 
    echo $submit_var;
 
    echo '</form>';
?>
 
</body>
</html>

02/03/2011, 08h21	#3
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	ce genre de selecteur m'intrigue toujours: Code : Sélectionner tout - Visualiser dans une fenêtre à part $("#frm_login :text") il sert à quoi le :text ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

02/03/2011, 13h20	#5
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	ha oki les inputs text du form __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

02/03/2011, 23h58	#6
Samolo Nouveau Membre du Club Inscription : janvier 2009 Messages : 39 Détails du profil Informations forums : Inscription : janvier 2009 Messages : 39 Points : 32 Points : 32	Bonjour, Il y a un problème avec ce morceau de code il ne teste en aucun cas si username et name ont tout les 2 moins de 5 lettres. Donc tout à fait normal qu'il ne mette pas 2 messages d'erreur si l'utilisateur a moins de 5 lettre pour ces 2 champs. Modifier le 'else if' en 'if' devrait résoudre le problème
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email