Optimisation et compression de code

**brisso** · 05/07/2012, 09h34

Bonjour,
je débute en jQuery et JS en général. J'ai réalisé un script (avec pas mal d'aide) afin de valider un formulaire grâce à jquery validate. J'ai une barre de progression, des changement de classe (succes ou error) ainsi que des message d'erreurs lorsque les champs ne sont pas correctes.
Tout fonctionne très bien, mais je trouve que ça n'est pas très optimisé car je doit répéter les opération pour chaque champ, et je me dit que si j'en avais 50 (pour un questionnaire par exemple...ça serait bien chaud !

PS : j'ai utilisé "keyup" pour exécuter mes fonctions, je sais que c'est lent mais j'y tiens

PS2 : J'ai utilisé twitter bootstrap pour réaliser le site

Voici le jQuery

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
 
// VALIDATION FORMULAIRE /////////////////////////////////////////////////////////////////
 
// REGLES VALIDATION//
	$("#contact-form").validate({
	  rules: 
	  {
		 "contact-nom":{
			"required": true,
			"minlength": 2,
			"maxlength": 100
				},
		 "contact-prenom":{
			"required": true,
			"minlength": 2,
			"maxlength": 100
				},
		 "contact-email": {
			"required": true,
			"email": true,
			"maxlength": 255
				},
		"contact-structure":{
			"required": true,
			"minlength": 2,
			"maxlength": 100
				},
		 "contact-sujet":{
			"required": true,
			"minlength": 2,
			"maxlength": 100
				},
		 "contact-message": {
			"required": true,
			"minlength": 2,
				}
		}});
 
// VARIABLES POUR TEST//
 
		var pourcent1=0;
		var pourcent2=0;
		var pourcent3=0;
		var pourcent4=0;
		var pourcent5=0;
		var pourcent6=0;
		var pourcent=0;
 
// TEST SI RAFRAICHISSEMENT DE LA PAGE AVEC DES CHAMPS DEJA REMPLIS//
 
		if($('#contact-nom').attr('placeholder')!='...' || $('#contact-nom').val()!=''){
			if($('#contact-nom').valid()){
					pourcent1=17;
					$('#contact-nom').addClass('success');
			}
		}
		if($('#contact-prenom').attr('placeholder')!='...' || $('#contact-prenom').val()!=''){
			if($('#contact-prenom').valid()){
					pourcent2=17;
					$('#contact-prenom').addClass('success');
			}
		}
		if($('#contact-email').attr('placeholder')!='...' || $('#contact-email').val()!=''){
			if($('#contact-email').valid()){
					pourcent3=17;
					$('#contact-email').addClass('success');
			}
		}
		if($('#contact-structure').attr('placeholder')!='...' || $('#contact-structure').val()!=''){
			if($('#contact-structure').valid()){
					pourcent4=17;
					$('#contact-structure').addClass('success');
			}
		}
		if($('#contact-sujet').attr('placeholder')!='...' || $('#contact-sujet').val()!=''){
			if($('#contact-sujet').valid()){
					pourcent5=17;
					$('#contact-sujet').addClass('success');
			}
		}
		if($('#contact-message').attr('placeholder')!='...' || $('#contact-message').val()!=''){
			if($('#contact-message').valid()){
					pourcent6=17;
					$('#contact-message').addClass('success');
			}
		}
// VADDITION POUR TAILLE DE LA BARRE DE PROGRESSION//
		pourcent=parseInt(pourcent1) + parseInt(pourcent2) + parseInt(pourcent3) + parseInt(pourcent4) + parseInt(pourcent5) + parseInt(pourcent6);
		$('.bar-contact').css('width', pourcent+'%');
 
// TEST LORS DE LA SAISIE//
 
		$('#contact-nom').keyup(function(){
			if($('#contact-nom').valid()){
				pourcent1=17;
				$(this).addClass('success');
			}
			else{
				pourcent1=0;
				$(this).removeClass('success');
			}
			pourcent=parseInt(pourcent1) + parseInt(pourcent2) + parseInt(pourcent3)+parseInt(pourcent4) + parseInt(pourcent5) + parseInt(pourcent6);
			$('.bar-contact').css('width', pourcent+'%');
		});
		$('#contact-prenom').keyup(function(){
			if($('#contact-prenom').valid()){
				pourcent2=17;
				$(this).addClass('success');
			}
			else{
				pourcent2=0;
				$(this).removeClass('success');
			}
			pourcent=parseInt(pourcent1) + parseInt(pourcent2) + parseInt(pourcent3)+parseInt(pourcent4) + parseInt(pourcent5) + parseInt(pourcent6);
			$('.bar-contact').css('width', pourcent+'%');
		});
		$('#contact-email').keyup(function(){
			if($('#contact-email').valid()){
				pourcent3=17;
				$(this).addClass('success');
			}
			else{
				pourcent3=0;
				$(this).removeClass('success');
			}
			pourcent=parseInt(pourcent1) + parseInt(pourcent2) + parseInt(pourcent3)+parseInt(pourcent4) + parseInt(pourcent5) + parseInt(pourcent6);
			$('.bar-contact').css('width', pourcent+'%');
		});
		$('#contact-structure').keyup(function(){
			if($('#contact-structure').valid()){
				pourcent4=17;
				$(this).addClass('success');
			}
			else{
				pourcent4=0;
				$(this).removeClass('success');
			}
			pourcent=parseInt(pourcent1) + parseInt(pourcent2) + parseInt(pourcent3)+parseInt(pourcent4) + parseInt(pourcent5) + parseInt(pourcent6);
			$('.bar-contact').css('width', pourcent+'%');
		});
		$('#contact-sujet').keyup(function(){
			if($('#contact-sujet').valid()){
				pourcent5=17;
				$(this).addClass('success');
			}
			else{
				pourcent5=0;
				$(this).removeClass('success');
			}
			pourcent=parseInt(pourcent1) + parseInt(pourcent2) + parseInt(pourcent3)+parseInt(pourcent4) + parseInt(pourcent5) + parseInt(pourcent6);
			$('.bar-contact').css('width', pourcent+'%');
		});
		$('#contact-message').keyup(function(){
			if($('#contact-message').valid()){
				pourcent6=17;
				$(this).addClass('success');
			}
			else{
				pourcent6=0;
				$(this).removeClass('success');
			}
			pourcent=parseInt(pourcent1) + parseInt(pourcent2) + parseInt(pourcent3)+parseInt(pourcent4) + parseInt(pourcent5) + parseInt(pourcent6);
			$('.bar-contact').css('width', pourcent+'%');
		});		
 
// EXECUTION DE LA PAGE PHP VIA AJAX//
 
		 $("#contact-form").bind("submit",function(e) {
			e.preventDefault();
			if($(this).valid())
				$.ajax({
						url:"contact.php",
						data:$("#contact-form").serialize(),
						type:"POST",
						success: function(){
								$('#contact-form').hide();
								$('#envoye').show();
							}
 
						}
				);  
		});

Et le HTML pour y voir plus claire :

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
 
<div class="span6">
            <h2><div class="icons mail"></div>Nous écrire</h2>
            <p>
            	<form class="well" id="contact-form" method="post" action="#">
                    <label for="contact-nom">Nom</label>
                    <input type="text" class="span3" placeholder="..." id="contact-nom" name="contact-nom"/>
                    <label for="contact-prenom">Prénom</label>
                    <input type="text" class="span3" placeholder="..." id="contact-prenom" name="contact-prenom"/>
                    <label for="contact-email">eMail</label>
                    <input type="email" class="span3" placeholder="..." id="contact-email" name="contact-email"/>
                    <label for="contact-structure">Structure ou Entreprise</label>
                    <input type="text" class="span3" placeholder="..." id="contact-structure" name="contact-structure"/>
                    <label for="contact-sujet">Sujet</label>
                    <input type="text" class="span3" placeholder="..." id="contact-sujet" name="contact-sujet"/>
                    <label for="contact-message">Message</label>
                    <textarea  class="span3" placeholder="..." id="contact-message" name="contact-message"></textarea>
                    <label class="checkbox">
                    <input type="checkbox" id="contact-news" name="contact-news" checked="checked"/> Abonnement à notre newsletter.
                    </label>
                    <br />
                         Progression... 
                         <br />
                         <div class="progress progress-striped active" style="margin-left:0;">
                           <div class="bar bar-contact" style="width:0%;"></div>
                        </div>
                        <div style="clear:both"></div>
                    <br />
 
                    <input type="submit" class="btn" name="submit" style="float:left" value="Envoyer"/>
            	</form>
             </p>
 
            <div id="envoye" style="display:none">
                <div class="alert alert-success">Votre message a bien été envoyé, nous vous répondrons dès que possible.</div>
            </div>
 
        </div>

Merci de votre aide et de vos éclairages !

**Bovino** · 05/07/2012, 09h49

Ben déjà, multiplier les événements qui font la même chose, c'est pas forcément terrible...
Dans un premier temps, ajoute un attribut data-pourcent à tes input :

Code html :

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

<input type="text" class="span3" placeholder="..." id="contact-nom" name="contact-nom" data-pourcent="0" />

et dans ton 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
$('#contact-form').on('keyup', '.span3', function(){
	var $this = $(this);
	if($this.valid()){
		$this.data('pourcent', 17);
		$this.addClass('success');
	}
	else{
		$this.data('pourcent', 17);
		$this.removeClass('success');
	}
	pourcent = 0;
	$('.span3').each(function(){
		pourcent += +$(this).data('pourcent');
	});
	$('.bar-contact').css('width', pourcent+'%');
});

Enfin, c'est l'esprit...
La factorisation du code, déléguer les événements pour en attacher le moins possible, DRY (Don't Repeat Yourself), toussa...

**brisso** · 05/07/2012, 10h08

Génial ! Ca marche

J'ai juste dû changer la classe .span3 car comme je le disais plus haut, j'utilise bootstrap et la classe est déjà utilisée dans d'autres inputs...

Sinon petit oubli de ta part, mais je préfère le dire pour aider d'autre comme moi (une semaine plus tôt je serais venu te dire la "gueule enfarinée" que ton truc marchait pas

)

Dans le ELSE c'est "0" et non "17"

Code :

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

1
2
3
4
5
 
else{
			$this.data('pourcent', 0);
			$this.removeClass('success');
		}

En tout cas merci pour la réponse éclaire et d'une efficacité redoutable

J'essaie de poursuivre ma "compression"

Optimisation et compression de code

jQuery

Vue hybride

Discussions similaires

Partager

Partager