jquery validation de mail

**cragoroth** · 27/01/2012, 14h31

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

**cragoroth** · 27/01/2012, 15h54

j'aimerais faire ceci :

Code :

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

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** · 27/01/2012, 16h12

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** · 27/01/2012, 16h18

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

Code :

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

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

comme ça, ça ne marche pas :

Code :

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

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** · 27/01/2012, 16h28

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** · 27/01/2012, 16h44

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

Code :

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

$('span:#result')

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

Code :

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

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

Code :

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

$('#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 :

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

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 :

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

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

correspondrait mieux à ton code...

jquery validation de mail

jQuery

Vue hybride

Discussions similaires

Partager

Partager