jquery validation de mail

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

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 :

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 :

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 :

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

[cragoroth]

j'aimerais faire ceci :

Code :

1
2
 
$("span:#result").val() == "email non disponible"

ou un truc du genre.

En gros récupérer ma valeur du span, ou se trouve dedans (email non disponible ou mail disponible ou mail invalide...)

mais je pense mal faire avec ce span...

merci pour votre aide

[eckerdecker]

Salut,

Je n'ai pas tout regardé, mais en tout cas pour ton problème de span il est assez simple : .val() ne peut s'utiliser que sur des éléments de formulaires, pour récupéré le texte de ton span tu peux utiliser .text().

[cragoroth]

ok ok merci pour ta réponse mais ia une synthaxe particulière....?

Code :

1
2
 
$('#result').text() == "email non disponible"

comme ça, ça ne marche pas :

Code :

1
2
 
$('span:#result').text() == "email non disponible"

peut-être comme ceci...?

pour info je débute en jquery mais là jvois vraiment pas...

[cragoroth]

sinon j'ai peut-être pas été assez clair dans mon explication et dans ce que je veux....

J'ai un champ input pour le mail.

Losqur'il click sur valider, j'ai jquery qui test le mail, s'il est valid le champ input devient vert sinon il devient rouge.

En plus de ça j'aimerais quand je valid par le même boutton, qu'il fasse la même chose avec le mail mais avec le plus de controler si le mail existe dans une base de données....

comment faire en jquery ?

faut-il tout faire en jquery ? ou comme je l'ai fais, passer par un fichier php intermédiaire qui tst le mail en base, la validité du mail et me renvoi une réponse dans ce fameux span dans le même formulaire....


J'ai pensé en jquery tester la valeur de ce span pour effectuer mon jquery qui rend mon champ input rouge ou vert si c'est good.

je galère pas mal.

des idées.....

merci par avande de votre retour

[Bovino]

Désolé, mais je n'ai pas vraiment l'impression que tu comprennes ce que tu fais...

Code :

$('span:#result')

cette syntaxe n'existe tout simplement pas... il faut utiliser l'une des deux suivantes :

Code :

1
2
$('#result') // A privilégier puisqu'un id doit être unique
$('span#result')

Code :

$('#result').text() == "email non disponible"

Ce serait correct si le contenu de ton span était bien le message, mais si j'en crois ton code PHP

Code php :

echo '<input class="green" type=text value="mail disponible"/>';

ton span contient juste un input (je vois d'ailleurs pas trop l'intérêt mais bon...)

Code :

$('#result').find('input').val() == "email non disponible"

correspondrait mieux à ton code...

[cragoroth]

wouhahhahahaa

merci pour le guidage d'aide de réponse de la mort qui tue....
En fait j'avais ma div result dans quoi je mettais un autre span avec la valeur de ce span que je voulais prendre:

voici la réponse:

dans ma page requete2.php

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
				if(filter_var($email, FILTER_VALIDATE_EMAIL)){
						if($num_rows !=0){
		                           echo '<span id="validite" class="red">email non disponible</span>';
					    }else{
					        echo '<span id="validite" class="green">mail disponible</span>';
				        }				
				}else{
						if($email == 'Votre adresse mail'){
						     echo '<span id="validite" class="red">Veuillez saisir un mail</span>';
						}else{
						     echo '<span id="validite" class="red">emal invalide</span>';
						}				
 
				}

et le code de la page jquery.main.js

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
43
44
45
46
47
48
 
    $('#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( $("#validite").text() == "email non disponible" || 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;
    });

et le form :

Code :

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

et ça marche je te remercie pour m'avoir ouvert, et on peut le dire, les yeux sur une valeur que je n'aurais jamais pu récupérer car le span result était vide car je m'étais un autre span dedans et celui là sans id..LoooL