Discussion :

[cragoroth]

Bonjour,

J'aurais aimé savoir si quelqu'un aurait des piste pour une validation de mail en jquery ???

J'aimerais faire ceci :

lorsque la personne saisie son mail :
- validation du mail à la saisie sur le fait de savoir si c'est bien un mail
- en parallèle est-il possible de faire une validation instantannée pour voir si le mail existe bien dans la base de données ???

J'ai fais ceci mais j'ai du mal :

mon form

Code :

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

1
2
3
4
5
6
7
8
 
<input type="text" name="email" id="email" value="Votre adresse mail" />
 
<label for="email">
     <span class="red">*</span> Saisissez votre adresse @-mail.<br />
     <span id="result" name="result"></span>
</label>
<input class="submit" type="submit" name="submit_first" id="submit_first" value="" />

mon fichier requete2.php:

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
 
				$email 		= 	mysql_real_escape_string($_POST['email']);
 
				$query = "SELECT * FROM utilisateurs WHERE email_utilisateurs ='".$email."'";
				$result = mysql_query($query);
			    $utilisateurs = mysql_fetch_array($result);
				$num_rows = mysql_num_rows($result);
 
 
				if(filter_var($email, FILTER_VALIDATE_EMAIL)){
						if($num_rows !=0){
		                           echo '<input class="red" type=text value="email non disponible"/>';
					    }else{
					        echo '<input class="green" type=text value="mail disponible"/>';
				        }				
				}else{
						if($email == 'Votre adresse mail'){
						     echo '<input class="red" type=text value="Veuillez saisir un mail"/>';
						}else{
						     echo '<input class="red" type=text value="emal invalide"/>';
						}				
 
				}

et mon fichier jquery.main.js

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
 
    $('#submit_first').click(function(){
        //remove classes
        $('#first_step input').removeClass('error').removeClass('valid');
 
        //ckeck if inputs aren't empty
        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
        var fields = $('#first_step input[type=text], #first_step input[type=password]');
        var error = 0;
 
     	$.post("requete2.php", { email: $("#email").val() },
			function(data) {
				$("#result").html(data);
        	});
 
 
        fields.each(function(){
            var value = $(this).val();
 
            if(value.length<4 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) || $('#email').val() != $('#email2').val()){
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);
 
                error++;
            } else {
                $(this).addClass('valid');
            }
        });        
 
        if(!error) {
 
            if( $('#newPass').val() != $('#newPass2').val() ) {
                    $('#first_step input[type=password]').each(function(){
                        $(this).removeClass('valid').addClass('error');
                        $(this).effect("shake", { times:3 }, 50);
                    });
 
                    return false;
            } else {
                //update progress bar
                $('#progress_text').html('33% Complete');
                $('#progress').css('width','113px');
 
                //slide steps
                $('#first_step').slideUp();
                $('#second_step').slideDown();     
            }			               
        } else return false;
    });

j'arrive à valider tout ce don't j'ai besoin, j'arrive à afficher ce que je veux mon span result (email valide, invalide, disponible....) mais lorsque tout mes champs sont remplis j'ai toujours email non-disponible(déjà utilisé)et mon form est quand même validé et je passe à l'étape suivante...

J'ai voulu faire ceci:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
if($('#result').val() == 'email non disponible'){
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);
 
                error++;
 
}else{
                $(this).addClass('valid');
}

le souci est que je n'arrive pas à le mettre au bon endroit...

merci pour votre aide