Jquery les champs vide dc submit sera visible [Résolu]

[saibri]

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.

[MrPringle]

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.

[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.

[MrPringle]

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.

[saibri]

Ca ne marche toujours pas.

Avez-vous une autre idée ?

[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...

[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.

[saibri]

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 );
					});
 
});