Bonsoir tout le monde !

J'essaie d'approfondir le TP SQL/PHP de M.Nebra avec le minichat et j'en suis arrivé à faire une page d'inscription.

J'essaie de vérifier en live (sans avoir à envoyer le formulaire) la validité des données saisies, en passant par du Javascript. 

J'ai réussi à vérifier que les 2 emails saisies sont identiques grâce au script suivant, mais je n'arrive pas à y intégrer la vérification du format de l'adresse email, ça n'a pas l'air de fonctionner du tout..

function checkEmail()
{
    //Stocke les emails dans des variables
    var email1 = document.getElementById('email1');
    var email2 = document.getElementById('email2');
	
    //Stocke le charmp du message de confirmation
    var message = document.getElementById('confirmMessage2');
	var message2 = document.getElementById('confirmMessage3');
    //Couleurs du message de confirmation
    var goodColor = "#66cc66";
    var badColor = "#ff6666";

	// La fonction de validation du format de l'email
	function validateEmail(elementValue){        
	var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
	return emailPattern.test(elementValue);   
	}   
	
	// Email valide ?

	if(validateEmail(email1) == true){message2.innerHTML = " Emails valide!";}
	
	
	// Verifie que les emails correspondent et que le champ n'est pas vide

    if(email1.value == email2.value && !email1.value=="" && !email2.value==""){
		
		//Affichage du message d'email valides
     
        message.style.color = goodColor;
        message.innerHTML = " Emails Match!";
    }
	
	else{
        
		//Affichage du message d'email invalides
       
        message.style.color = badColor;
        message.innerHTML = " Emails Do Not Match!";
    }
}  

Je ne comprends pas d'où vient le problème..

Une erreur ici:

 var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

Pour que cela fonctionne tu dois déclarer ta regex en tant que regex:

 var emailPattern = new RegExp("/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/");

Merci ! Je n'ai jamais utilisé de RegEx avant, j'ai corrigé cela.

Mais ça n'a pas l'air de fonctionner.. Est-ce que je ne devrai pas mettre deux fonctions dans le même fichiers js ? Faire un js séparé pour la validation de l'email ?

J'ai essayé

if(validateEmail(email1) == true)

if(validateEmail(email1) = true)

Mais le problème n'a pas l'air de venir de là non plus

-
Edité par Leyneth 25 octobre 2016 à 18:58:48

Non inutile.

Que te retourne la console comme erreur?

Au passage ceci:

!email1.value==""

Peut etre ecrit ainsi:

email1.value!=""

Ca fonctionnera pareil mais c'est plus comprehensible (et ca fait une economie d'un caractere mine de rien)

-
Edité par Aurélien Massé 25 octobre 2016 à 19:00:50

Psychotik a écrit:

Non inutile.

Que te retourne la console comme erreur?

"checkemail.js:22 Uncaught ReferenceError: Invalid left-hand side in assignment", donc à la ligne du test if 

EDIT : Merci ! Mon code est très archaïque, c'est toujours bon à savoir

-
Edité par Leyneth 25 octobre 2016 à 19:02:23

Enleve ton == true dans ton if il ne sert a rien

Pour t'expliquer pourquoi:

L'expression dans le if va retourner true ou false selon si elle est vrai ou fausse et le if va juste verifier ce true ou false si tu y met directement true ou false ca fonctionne pareil

-
Edité par Aurélien Massé 25 octobre 2016 à 19:04:56

Justement, je l'ai enlevé et j'ai eu cette erreur (donc pas comme dans le premier post), je viens de le remettre et je ne l'ai plus, mais le code ne fonctionne pas plus ._.

Si tu modifie ton code sans le dire on va avoir du mal a s'y retrouver.

Tu peux recoller ton code tel au'il est actuellement?

et nous dire ce qui ne fonctionne pas

Pour info ton erreur de tout a l'heure c parceque tu avais mis un simple = qui n'q rien a faire dans un if.

-
Edité par Aurélien Massé 25 octobre 2016 à 19:07:27

Yep désolé !

function checkEmail()
{
    //Stocke les emails dans des variables
    var email1 = document.getElementById('email1');
    var email2 = document.getElementById('email2');
	
    //Stocke le charmp du message de confirmation
    var message = document.getElementById('confirmMessage2');
    //Couleurs du message de confirmation
    var goodColor = "#66cc66";
    var badColor = "#ff6666";

	// La fonction de validation du format de l'email
	function validateEmail(elementValue){        	
	var emailPattern = new RegExp("/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/");
	return emailPattern.test(elementValue);   
	}   
	
	// Email valide ?

	if(validateEmail(email1) = true){message.innerHTML = " Emails valide!"}
	
	
	// Verifie que les emails correspondent et que le champ n'est pas vide

    // if(email1.value == email2.value && email1.value!="" && email2.value!=""){
		
		//Affichage du message d'email valides
     
        // message.style.color = goodColor;
        // message.innerHTML = " Emails Match!";
    // }
	
	// else{
        
		//Affichage du message d'email invalides
       
        // message.style.color = badColor;
        // message.innerHTML = " Emails Do Not Match!";
    // }
}  

Avec ce code là, au chargement de la page, la console n'affiche aucune erreur. Quand je rentre une adresse mail dans le champ qui correspond à email1, j'ai l'erreur citée plus haut : Uncaught ReferenceError: Invalid left-hand side in assignment

Et le code ne fonctionne pas

function checkEmail()
{
    //Stocke les emails dans des variables
    var email1 = document.getElementById('email1');
    var email2 = document.getElementById('email2');
	
    //Stocke le charmp du message de confirmation
    var message = document.getElementById('confirmMessage2');
    //Couleurs du message de confirmation
    var goodColor = "#66cc66";
    var badColor = "#ff6666";

	// La fonction de validation du format de l'email
	function validateEmail(elementValue){        	
	var emailPattern = new RegExp("/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/");
	return emailPattern.test(elementValue);   
	}   
	
	// Email valide ?

	if(validateEmail(email1) == true){message.innerHTML = " Emails valide!"}
	
	
	// Verifie que les emails correspondent et que le champ n'est pas vide

    // if(email1.value == email2.value && email1.value!="" && email2.value!=""){
		
		//Affichage du message d'email valides
     
        // message.style.color = goodColor;
        // message.innerHTML = " Emails Match!";
    // }
	
	// else{
        
		//Affichage du message d'email invalides
       
        // message.style.color = badColor;
        // message.innerHTML = " Emails Do Not Match!";
    // }
}  

Avec ce code là (donc == au lieu de =), je n'ai aucune erreur, que ce soit sans insertion de l'adresse email ou une fois la saisie effectuée, mais le code ne fonctionne pas quand même.

Alors le if(x = y) en JS n'existe pas c'est pour ca que tu avais l'erreur left hand etc...

Ensuite comme je t'ai dit plus tot enleve le == true dans ton if il ne sert a rien

enfin remplace ta ligne if par ceci:

if(validateEmail(email1)){
    console.log("VALIDE")
}
else{
    console.log("INVALIDE")
}

Ensuite essaye avec un email correct puis un email incorrect et dis nous ce que ca donne en console pour chacun des cas

Ah d'accord ! Merci ! Et en essayant ce if à la place de mon if, ça me met Invalide dans les deux cas 

Ca doit venir de ma fonction validateEmail alors, non ?

Ok je crois que j'ai trouvé le problème.. Je suis tellement débile, je pense que ça vient du fait que je fais le test sur email1 et pas email1.value, je vais essayer et voir si ça règle le problème..

-
Edité par Leyneth 25 octobre 2016 à 19:24:00

Possible essaye avec ceci:

"/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/"

Quel idiot je fais.. Désolé de t'avoir fait perdre autant de temps et merci infiniment pour ton aide précieuse ! 

En fait le problème venait du fait que je testais email1 (certainement tous ses attributs HTML) au lieu de tester la valeur, alors que je l'ai fait 2 lignes plus bas dans le même script quoi..

Merci encore de ton aide et du temps que tu as consacré !

Je débute vraiment, que ce soit en javascript et en php. Je ne savais même pas qu'il y'avait une console et qu'on pouvait l'utiliser comme tu l'a fait avec le console.log(), ça va m'être tellement utile pour débugger et trouver d'où viennent les erreurs au lieu de chercher à tâtons. Merci beaucoup ! 

-
Edité par Leyneth 25 octobre 2016 à 19:28:37