Afficher 2 messages d'erreur

**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

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

Envoyé par SpaceFrog

ha oki les inputs text du form

oui tout a fait.

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

Afficher 2 messages d'erreur

jQuery

Vue hybride

Discussions similaires

Partager

Partager