'fadeOut()' et 'fadeIn()' et affichage

Version imprimable

Salut, j'ai un problème en utilisant la fonction jquery: fadeOut() dans une formulaire d'inscription au moment d'affichage d'une crois si les ou l'un des champs est vide. Ce script ne fonctionne que si le champ email est vide.
Aide svp.
Merci d'avance

voici mon code html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form id="signup-form" action="signup.php" method="post">
            <fieldset>
                <legend>Inscription</legend>
 
                <p><label for="pseudo" id="pseudo">Pseudo :</label>
                <input type="text" name="pseudo" id="pseudo" />
                <span class="error" style="margin:0 0 0 30px;"></span><span class="success"></span></p>
 
                <p><label for="mail" id="mail">Email :</label>
                <input type="text" name="email" id="email" />
                <span class="error" style="margin:0 0 0 30px;"></span><p>
 
                <p><label for="pass" id="pass">Mot de passe :</label>
                <input type="password" name="pass" id="pass" />
                <span class="error" style="margin:0 0 0 30px;"></span></p>
 
                <input type="submit" id="signup-submit" class="signup-submit" value="Envoyer" />
 
                <div class="loader"></div>
            </fieldset>
        </form>

et voici mon script:

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
         $('.loader').hide();
 
         $('#signup-submit').click(function(){
             $('.loader').show();
             var link = 'signup.php';
             var pseudo = $('#pseudo').val();
             var email = $('#email').val();
             var pass = $('#pass').val();
             var valid = true;
 
            if($('#pseudo').val()==''){
                valid = false;
                $('.loader').fadeOut();
                $('#pseudo').next('.error').fadeIn();
            }
            else{
                $('#pseudo').next('.error').fadeOut();
            }
 
            if(!$('#email').val().match(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9-]{2,}[.][a-zA-Z]{2,3}$/)){
                valid = false;
                $('.loader').fadeOut();
                $('#email').next('.error').fadeIn();   
            }
            else{
                $('#email').next('.error').fadeOut();
            }
 
            if($('#pass').val()==''){
                valid = false;
                $('.loader').fadeOut();
                $('#pass').next('.error').fadeIn();
            }
            else{
                $('#pass').next('.error').fadeOut();
            }
 
          return false;  
         });
});

Bonjour

Je n'ai pas compris la question, mais j'ai retravaillé vos codes.

Un ID doit être unique dans la page web !

Attention à l'écriture des tags "label".

Codes à modifier en fonction de vos besoins :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form id="signup-form" action="signup.php" method="post">
	<fieldset>
		<legend>Inscription</legend>
		<p>
			<label for="pseudo">Pseudo :</label>
			<input type="text" name="pseudo" id="pseudo" />
			<span class="error" style="margin:0 0 0 30px;">ERREUR</span><span class="success">SUCCESS</span>
		</p>
		<p>
			<label for="mail">Email :</label>
			<input type="text" name="email" id="email" />
			<span class="error" style="margin:0 0 0 30px;">ERREUR</span>
		<p>
		<p>
			<label for="pass">Mot de passe :</label>
			<input type="password" name="pass" id="pass" />
			<span class="error" style="margin:0 0 0 30px;">ERREUR</span>
		</p>
		<input type="submit" id="signup-submit" class="signup-submit" value="Envoyer" />
		<!-- N'apparais que fugacement inutile <div class="loader">LOADER</div> -->
	</fieldset>
</form>

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
$('span.error, span.success').hide();
 
$('#signup-submit').click(function(){
	var // objLoader = $('div.loader'),
		objPseudo = $('#pseudo'),
		objPseudoError = objPseudo.next('span.error'),
		objEmail = $('#email'),
		objEmailError = objEmail.next('span.error'),
		objPass = $('#pass'),
		objPassError = objPass.next('span.error'),
		pseudo = objPseudo.val(),
		email = objEmail.val(),
		pass = objPass.val(),
		boolValid = true;
 
	if ($.trim(pseudo).length == 0){
		boolValid = false;
		// objLoader.fadeOut();
		objPseudoError.fadeIn();
	}
 
	if (!email.match(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9-]{2,}[.][a-zA-Z]{2,3}$/)){
		boolValid = false;
		// objLoader.fadeOut();
		objEmailError.fadeIn();   
	}
 
	if ($.trim(pass).length == 0){
		boolValid = false;
		// objLoader.fadeOut();
		objPassError.fadeIn();
	}
 
	/*
	 * Si boolValid est vrai, alors
	 * l'action se poursuit par la
	 * transmission du formulaire
	 * au lien indiqué dans l'attribut
	 * action.
	 */
	return boolValid;  
});

26/06/2011, 20h38
riadh8

Merci :), ça marche très bien.