Discussion :

[riadh8]

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 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
<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 :

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
         $('.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;  
         });
});

[danielhagnoul]

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 :

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
<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 :

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
$('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;  
});

[riadh8]

Merci , ça marche très bien.