Evenement sur un input

Bonjour ^^

Je reviens vers vous pour une petite question

Voilà, j'essaye de dynamiser un peu mon champ d'inscription (ca fait parti de mon apprentissage :D)

En gros je voulais que dans la partie "email" si l'utilisateur n'a pas mis d'@ alors le cadre serait rouge ou encore, la fameuse petite phrase en rouge qui s'affiche "ce mail n'est pas conforme blablabla"

donc voila la parti js :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

var mail = document.getElementById('email');   mail.addEventListener('input', validation);   function validation(){ if (!value.includes('@')) mail.style.borderColor = 'red' else mail.style.borderColor ='green' }

---

partie html :

Code:

---

1 2 3 4 5

<p> <label for="password">Mot de passe :</label> <input type="password" id="password" name="password" placeholder="entrer votre mot de passe" required> </p>

---

Le souci viens de "value", mais je pensais que c'était quelque chose intuitif avec JS... ça doit être tout bête je suis sur mais bon ^^
Il doit aussi y avoir une manière plus raccourci de faire cela mais je préfère pour le moment bien développer mes codes ;)

Merci

Bonjour,

Tu parles d'email, et montres un input de password ? :cfou:


1- Pour un email :

Code:

---

<input type="email" ..../>

---

Ça suffit.

2- Pour un mot de passe :
Si tu veux verifier/valider en JavaScript : longueur mini/maxi, majuscules, minuscules,...
Tu trouveras de nombreux scripts : :recherch:


3- quand on ne connais pas une fonction, ou comment l'utiliser, on cherche aussi dans la DOC :

• .includes()

OUps j'ai copié la mauvaise partie !!

Code:

---

1 2 3 4

<p> <label for="mail">E-mail :</label> <input type="email" id="email" name="email" placeholder="entrer votre email" required> </p>

---

Mais je voulais juste une réponse simple de mon code !!
De plus, je ne sais pas trop comment chercher sur ce site... Et la plupart du temps je ne comprends pas les réponses... C'est pour cela que je pose ma question ici, pour avoir une réponse personnel...

La réponse simple :

Code:

---

<input type="email" ..../>

---

suffit pour vérifier/valider un email.


Une solution à ton "exercice" :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var mail = document.getElementById('email'); mail.addEventListener("blur", function(){ var mail_val = mail.value; // if ( !mail_val.includes('@') || !mail_val.includes('.') ) if ( mail_val.indexOf('@')<0 || mail_val.indexOf('.')<0 ) { mail.style.borderColor = 'red'; alert(mail_val + " : ce n'est pas un email valide."); } else { mail.style.borderColor ='green'; } }, false);

---

Attention :

• on vérifie que l'email N'est PAS valide en testant l'absence de l'un ou de l'autre des caractères "@" et "."
• Ca NE signifie PAS que, dans le cas contraire, l'email est valide.

On pourrait utiliser une regex pour vérifier que l'email EST valide... (on en trouve sur le web)
Sauf que les normes d'écriture des emails évoluent (avec ou sans accents,....).
Donc, la regex risque de devenir obsolète.


Remarque :

Code:

---

1 2	if ( !mail_val.includes('@') || !mail_val.includes('.') ) if ( mail_val.indexOf('@')<0 || mail_val.indexOf('.')<0 )

---

Ces 2 lignes donnent un résultat équivalent. (on peut utiliser l'un ou l'autre)

Citation:

---

Envoyé par d3LTa7

... Et la plupart du temps je ne comprends pas les réponses...

---

Si tu n'as pas les bases (du langage), ce n'est pas étonnant.

Il faut APPRENDRE pour pouvoir COMPRENDRE.
Et ça, on ne peut pas le faire à ta place.

Le mieux serait que tu suives des COURS, avec des EXERCICES à faire (avec les réponses et explications).

Citation:

---

Envoyé par d3LTa7

En gros je voulais que dans la partie "email" si l'utilisateur n'a pas mis d'@ alors le cadre serait rouge ou encore, la fameuse petite phrase en rouge qui s'affiche "ce mail n'est pas conforme blablabla"

---

Juste pour info : les navigateurs font cela nativement avec l'attribut "pattern" :

Citation:

---

Envoyé par MDN

Une expression rationnelle qui permet de vérifier la valeur saisie. L'expression doit correspondre à la valeur entière. L'attribut title peut être utilisé pour décrire le motif et aider l'utilisateur. Cet attribut est appliqué lorsque type vaut text, search, tel, url, email ou password, dans les autres cas, il est ignoré. Le langage d'expression rationnelle est le même que celui utilisé en JavaScript (cf. RegExp) et le paramètre 'u' permet de traiter l'expression comme une suite de codets Unicode. L'expression utilisée n'est pas entourée de barres obliques (slash).

---

Il y a des exemples ici : https://www.w3schools.com/tags/att_input_pattern.asp

Encore une fois c'est juste pour info...