Un alert bien bavard

**Unadrielas** · 11/09/2012, 07h40

Bonjour,

voilà quelques jours que je développe mon site à l'aide de jQuery, et malgré un bon fonctionnement général, je coince sur un problème peut-être simple.

Lorsqu'un utilisateur veut s'inscrire, une fonction jQuery est appelée, vérifiant une première fois les données et surtout l'acceptation des cgu (php le fait aussi derrière, on est jamais sûr avec un code côté client

). Lorsque que cette dernière n'est pas acceptée, la fonction alert est appelée pour prévenir l'utilisateur. Seulement voilà, ce alert, seul dans la fonction, va apparaitre pas moins de 8 fois ! J'ai fait un alert à l'appel de la fonction, et celle ci est bien appelée qu'une seule fois...

Je suis donc sans réponse, à un problème qui va peut-être paraitre simple à certains ^^

VOici un extrait du 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
$('#boutonValider').click(function() {
		alert('hello');
		$('.validation').fadeOut(100, function() {
			$('.validation').empty();
			var validation = 1;
			if ($('#checkboxCgu:checked').length == 1) {
                                // On vérifie le tout et envoi via Ajax
			}
			else {
				alert('Vous devez accepter les CGU pour pouvoir vous inscrire !');
			}
			return false;
		});
		return false;
	});

Et le HTML correspondant :

Code html :

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
<div id='inscription'>
	<div id='titrePage'>Inscription</div>
	<form action='' method='POST' name='FrmInscription' id='FrmInscription'>
		<div id='account'>
			<div class='validation' id='validationAccountName'></div>
			<div class='entree'>
				<label for='accountName'>Nom de compte </label><input type='text' name='accountName' class='accountName'/>
			</div>
			<div class='validation' id='validationAccountPass'></div>
			<div class='entree'>
				<label for='accountPass'>Mot de passe </label><input type='text' name='accountPass' class='accountPass'/>
			</div>
			<div class='validation' id='validationAccountPass2'></div>
			<div class='entree'>
				<label for='accountPass2'>Répéter mot de passe </label><input type='text' name='accountPass2' class='accountPass2'/>
			</div>
			<div class='validation' id='validationEmail'></div>
			<div class='entree'>
				<label for='email'>E-mail </label><input type='text' name='email' class='email'/>
			</div>
			<div class='validation' id='validationEmail2'></div>
			<div class='entree'>
				<label for='email2'>Répéter E-mail </label><input type='text' name='email2' class='email2'/>
			</div>
		</div>
 
		<div id='gameInfo'>
			<div class='validation' id='validationPseudo'></div>
			<div class='entree'>
				<label for='pseudo'>Nom de personnage </label><input type='text' name='pseudo' class='pseudo'/>
			</div>
			<div class='validation' id='validationSexe'></div>
			<div class='entreeSexe'>
				<label for='sexe'>Sexe </label>	<div class='input'>
													<input type='radio' name='sexe' value='M' class='sexe'/> Homme
													<input type='radio' name='sexe' value='F' class='sexe'/> Femme
												</div>
			</div>
		</div>
 
		<div id='cgu'>
			<?php include('cgu.html'); ?>
		</div>
		<div id='cguOk'>
			<input type='checkbox' id='checkboxCgu' name='cgu'/><label id='labelCgu' for='cgu'>Je certifie avoir lu et m'engage à respecter ces conditions</label>
		</div>
 
		<div id='valider'>
			<input type='button' value='' name='valider' id='boutonValider'/>
		</div>
	</form>
</div>

Merci d'avance pour votre aide

**SpaceFrog** · 11/09/2012, 08h34

Il faudrait que l'on puisse voir le html associé, et en particulier les elements avec leur class et leur id

**danielhagnoul** · 11/09/2012, 12h18

Je pense que si alert('Vous devez accepter les CGU pour pouvoir vous inscrire !'); est affiché 8 fois c'est que if ($('#checkboxCgu:checked').length == 1) { est 8 fois "false" et qu'il y a 8 éléments ayant la classe validation : $('.validation').fadeOut(100, function() {.

**Unadrielas** · 11/09/2012, 16h32

Bonjour,

oui, j'en oublie un point important : à quoi se réfère le js ^^

Voici :

Code html :

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
<div id='inscription'>
	<div id='titrePage'>Inscription</div>
	<form action='' method='POST' name='FrmInscription' id='FrmInscription'>
		<div id='account'>
			<div class='validation' id='validationAccountName'></div>
			<div class='entree'>
				<label for='accountName'>Nom de compte </label><input type='text' name='accountName' class='accountName'/>
			</div>
			<div class='validation' id='validationAccountPass'></div>
			<div class='entree'>
				<label for='accountPass'>Mot de passe </label><input type='text' name='accountPass' class='accountPass'/>
			</div>
			<div class='validation' id='validationAccountPass2'></div>
			<div class='entree'>
				<label for='accountPass2'>Répéter mot de passe </label><input type='text' name='accountPass2' class='accountPass2'/>
			</div>
			<div class='validation' id='validationEmail'></div>
			<div class='entree'>
				<label for='email'>E-mail </label><input type='text' name='email' class='email'/>
			</div>
			<div class='validation' id='validationEmail2'></div>
			<div class='entree'>
				<label for='email2'>Répéter E-mail </label><input type='text' name='email2' class='email2'/>
			</div>
		</div>
 
		<div id='gameInfo'>
			<div class='validation' id='validationPseudo'></div>
			<div class='entree'>
				<label for='pseudo'>Nom de personnage </label><input type='text' name='pseudo' class='pseudo'/>
			</div>
			<div class='validation' id='validationSexe'></div>
			<div class='entreeSexe'>
				<label for='sexe'>Sexe </label>	<div class='input'>
													<input type='radio' name='sexe' value='M' class='sexe'/> Homme
													<input type='radio' name='sexe' value='F' class='sexe'/> Femme
												</div>
			</div>
		</div>
 
		<div id='cgu'>
			<?php include('cgu.html'); ?>
		</div>
		<div id='cguOk'>
			<input type='checkbox' id='checkboxCgu' name='cgu'/><label id='labelCgu' for='cgu'>Je certifie avoir lu et m'engage à respecter ces conditions</label>
		</div>
 
		<div id='valider'>
			<input type='button' value='' name='valider' id='boutonValider'/>
		</div>
	</form>
</div>

le checkbox incriminé est bien unique, mais j'ai compris ce que tu voulais dire danielhagou. Cependant, dans la logique procédurale, une fois la condition effectuée, on y reviens plus sans faire une boucle ou appeler une nouvelle fois la fonction, je me trompe ? En quoi le fait qu'il y ai 8 champs fasse faire au js 8 fois la condition des CGU ?
Ok, je crois comprendre... Il va appliquer un à un le fadeOut aux blocs de classe .validation et fera à chaque fois le test du check du CGU... Hum, quelque chose ne me parait pas clair ^^

**Bovino** · 11/09/2012, 16h38

Si, Daniel a raison.
Dans ton code, tu indiques une action à effectuer lors du clic sur $('#boutonValider').
Or dans cette action, tu demandes

Code :

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

$('.validation').fadeOut(100, function() {...})

et cette partie de code va donc être exécutée pour tous les éléments ayant la classe "validation", d'où tes huit messages.

**Unadrielas** · 12/09/2012, 18h51

En effet... J'ai donc changé l'appel de fonction en

Code :

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

$('.validation').empty().hide();

, ce qui fait que la suite ne se fait qu'une fois ensuite.

Un problème qui a du me crever la yeux au vu de la solution

Bon, théoriquement, tout est rentré dans l'ordre ^^ Merci à vous !

Un alert bien bavard

jQuery

Discussions similaires

Partager

Partager