Jquery les champs vide dc submit sera visible

Version imprimable

Bonjour,

voila mon code:

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
<!--************************** script validation formulaire **************-->
	<script type="text/javascript">
	var valid_champs='ok';
		$(document).ready(function() {
		var valid_champs='ok';
		//------------------ validation champ email par blur -------------
			$("#email").blur(function(){
				valid = true;
				var email = document.getElementById('email'); 
				var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
				if (filter.test(email.value)){
 
				$("#email").css("border-color","#98D100");
				valid_champs = 'ok';
				valid = false;
				}
				else{
					$("#email").css("border-color","#FF0000");
					valid_champs = 'no';
					valid = false;
				}
				if($("#email").val() == "" ){
					$("#email").css("border-color","#FF0000");
					valid = false;
					valid_champs = 'no';
				}
				if($("#email").val() == "E-mail" ){
					$("#message").css("border-color","#FF0000");
					valid_champs = 'no';
					valid = false;
				}
				return valid;
 
			});
 
			//--------------- validation champ objet par blur ------------
			$("#objet").blur(function(){
				valid = true;
				if($("#objet").val() == "" ){
					$("#objet").css("border-color","#FF0000");
					valid = false;
					valid_champs = 'no';
				}
				else{
					$("#objet").css("border-color","#98D100");
					valid = false;
					valid_champs = 'ok'
				}
 
				if(objet == "Objet" ){
					$("#message").css("border-color","#FF0000");
					valid_champs = 'no';
				}			
					return valid;
			});
 
			//------------ validation champ message par blur -------------
			$("#message").blur(function(){
				valid = true;
				if($("#message").val()!= "" ){
					$("#message").css("border-color","#98D100");
					valid = false;
					valid_champs = 'ok';
				}
				else{
					$("#message").css("border-color","#FF0000");
					valid_champs = 'no';
				}
				if(message != "Votre message" ){
					$("#message").css("border-color","#98D100");
					valid_champs = 'ok';
				}
 
					return valid;
			});
 
			//--------------- animation de champ message -----------------
			$("#message").focus(function(){
 
				$("#message").animate({ 
					height: "50px"
				  }, 1000 );
			});
 
			//------------- visibility de submit par blur ---------------
			$(document).ready(function(){
			if(valid_champs ='ok'){
				$("#envoyer").css("display","block");
				alert("les champs sont valide");
			}
			if(valid_champs ='no'){
				$("#envoyer").css("display","none");
				alert("les champs non valide");
				}
			});
 
 
		});

voila le code html:

Code:

1
2
3
4
5
6
7
8
<input id="email" type="text" value="E-mail" onFocus="if (this.value=='E-mail') {this.value=''}"/>
                        <div class="cl"></div>
                        <input id="objet" type="text" value="Objet" onFocus="if (this.value=='Objet') {this.value=''}"/>
                        <div class="cl"></div>
                        <textarea id="message" type="text" value="Votre message" 
						onFocus="if(this.value=='Votre message') {this.value=''}">Votre message</textarea>
                        <div class="cl"></div>
                        <input id="envoyer" type="submit" value="Envoyer"/>

Cordialement.

Bonjour,

C'est pas très clair comme message... Mais voila tout de même ma réponse, essaie avec cette fonction :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $("#email").blur(function() { var emailNode = $(this); var emailValue = emailNode.val(); var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; if (emailValue !== "E-mail" && emailValue !== "" && filter.test(emailValue)) { emailNode.css("border-color","#98D100"); //valid_champs = 'ok'; return true; } else { emailNode.css("border-color","#FF0000"); valid_champs = 'no'; return false; } });
Cordialement.

PS. Tu devrais totalement découpler je javascript du html et gérer tes événements en jQuery comme c'est le cas avec "blur" ci-dessus.

PS2. Question performance, tu devrais stocker tes nodes (Ex. $("#message")...) dans des variables plutôt que de les rechercher à chaque fois. Idem pour leurs valeurs.

17/09/2011, 13h41
saibri

Je voudrais lorsque tous les champs seront remplis que le submit soit visible tout simplement mais je n'arrive pas à faire ce test.

Nota bene : il existe un submit déjà invisible nommé (id=#envoyer). J'espère que l'idée est claire maintenant.

Essaie :
Code:

1 2 3 4 5 6 7 8 if(valid_champs === 'ok'){ $("#envoyer").css("display","block"); alert("les champs sont valide"); } else { $("#envoyer").css("display","none"); alert("les champs non valide"); } });
Quand tu vérifies une condition, tu dois utiliser "==" (ou plutôt "===" en js) et non "="sinon tu affectes la valeur à ta variable et cela retourne true.

Tu devrais voir les cours ici, cela t'aiderait car tu vas avoir des erreurs comme celles-ci à la pelle je pense. Bon courage.

18/09/2011, 18h37
saibri

Ca ne marche toujours pas.

Avez-vous une autre idée ?
19/09/2011, 02h04
MrPringle

La variable valid_champs ne doit pas être déclarée deux fois (aucun intérêt), la valeur par défaut ne doit pas être ok sinon le bouton apparaîtra si on ne touche à rien sur le formulaire.

PS. Essayez de faire des recherches par vous-même aussi...
19/09/2011, 11h49
saibri

Voila presque une semaine que j'ai fait des recherches dans d'autres forums mais je n'ai toujours rien trouvé.

De toute façon, merci pour vos réponses.

J'ai enfin trouvé la solution et voila le code jquery:

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
$(document).ready(function() {
			//------------------ validation champs avec le  blur -------------
					$("#email,#objet,#message").blur(function() {
 
					var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
					if ($("#email").val() !== "E-mail" && $("#email").val() !== "" && $("#email").val().match(filter) 
					&& $("#objet").val() !== "" && $("#objet").val() !== "Objet" 
					&& $("#message").val()!== "" && $("#message").val()!== "Votre message") {
 
					$("#objet,#message,#email").css("border-color","#98D100");
					$("#envoyer").fadeIn(2000);
					//alert('les champs valid');
					return true;
					}
					else {
 
					$("#objet,#message,#email").css("border-color","#FF0000");
					$("#envoyer").fadeOut(2000);
					//alert('les champs not valid');
					return false;
					}
					});
			//--------------- animation de champ message -----------------
					$("#message").focus(function(){
					$("#message").animate({
					height: "50px"
					}, 1000 );
					});
 
});