Discussion :

[sebgac]

Bonjour à tous ! C'est la reprise, cela fait 3 mois que j'ai pas codé et c'est un peu difficile de remettre le nez dans mon projet. J'espère que vous allez pouvoir m'aider à me dérouiller un peu

Je suis dans un formulaire. J'ai fait cette instruction qui me permet de vérifier si le regex est respectée et colore le texte en rouge si ce n'est pas le cas :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$("input#mail").keyup(function () {
 
            console.log('OK2');
 
            var mail = $("input#mail").val();
            var verifEmail = regexEmail.test(mail);
 
            if (verifEmail == false) {
                $(this).css('color', 'red');
            } else {
                $(this).css('color', 'white');
            };
        });

Cela fonctionne bien, mais au final ce n'est pas ce que je veux. Ce n'est pas UX, la ligne est rouge jusqu'à tant que c'est correct, et moi, je voudrais que la ligne soit colorée en rouge seulement si à la fin.
J'ai donc trouvé cette instruction :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$("input#mail").blur(function () {
 
            console.log('OK2');
 
            var mail = $("input#mail").val();
            var verifEmail = regexEmail.test(mail);
 
            if (verifEmail == false) {
                $(this).css('color', 'red');
            } else {
                $(this).css('color', 'white');
            };
        });

Alors là aussi ça fonctionne bien, mais cela me pose un autre problème, j'aimerai avoir l'effet du keyup lorsque je reviens une seconde fois focus dans mon champ de formulaire. Je me demande comment m'y prendre, est-ce qu'il y a un moyen de dire que je veux que le keyup fonctionne seulement si c'est la deuxième fois que c'est focus ?

Code javascript :

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
 
 
        var occurenceFocus = 0;
 
        $("input#mail").blur(function () {
            occurenceFocus++; 
        });
 
        if (occurenceFocus < 1) {
            $("input#mail").blur(function () {
 
                console.log('OK');
 
                var mail = $("input#mail").val();
                var verifEmail = regexEmail.test(mail);
 
                if (verifEmail == false) {
                    $(this).css('color', 'red');
                } else {
                    $(this).css('color', 'white');
                };
            });
 
        } else {
 
            $("input#mail").keyup(function () {
 
                console.log('OK2');
 
                var mail = $("input#mail").val();
                var verifEmail = regexEmail.test(mail);
 
                if (verifEmail == false) {
                    $(this).css('color', 'red');
                } else {
                    $(this).css('color', 'white');
                };
            });
        };

J'imagine qu'un truc m'échappe

Merci d'avance

[Toufik83]

Salut,

Essaies ceci :

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
 
$(document).ready(function() {
   var regexEmail = /^\w+([\.-]?\w+)*@\w+([\.-_]?\w+)*(\.\w{2,3})+$/;
   var keyupFocus = /^[\w@\.-_]+$/,
     mail, verifEmail;
   $("#mail").on('blur keyup focus', function(e) {
     mail = $(this).val().trim();
     /* on adapte la condition selon l'événement */
     verifEmail = e.type == "blur" 
       ? regexEmail.test(mail) 
       : mail.match(keyupFocus);
     console.log("event.type :"+e.type);
 
     if ((verifEmail == false || verifEmail == null) && mail !="") {
       $(this).css('backgroundColor', 'red');
     } else {
       $(this).css('backgroundColor', 'white');
     }
   });
 });

[sebgac]

Bonjour et merci pour ta réponse.

si je comprends bien

Code javascript :

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

var keyupFocus = /^[\w@\.-_]+$/;

cet regex vérifie si une chaine de caractère simple

Code javascript :

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

$("input#mail").on('blur keyup focus', function(e) {

on crée un écouteur sur blur keyup focus

Code javascript :

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

mail = $(this).val().trim();

on récupère la valeur de mail (input#mail dans mon cas) sans les espaces

Code javascript :

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

1
2
3
4
 
verifEmail = e.type == "blur"
              ? regexEmail.test(mail) 
              : mail.match(keyupFocus);

là j'ai un peu plus de mal à comprendre (je débute). C'est comme une condition if ? du genre si verifEmail qui est égal à l'event est identique à blur, alors ... on teste la valeur de mail et là je sais pas comment interpréter le " : " . Peux tu m'éclairer ?

Code javascript :

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

1
2
3
4
5
6
7
 
  if ((verifEmail == false || verifEmail == null) && mail !="") {
              $(this).css('color', 'red');
            } else {
              $(this).css('color', 'white');
            }
          });

là on vérifie si verifEmail est faux ou nul et que mail est différent de rien

en gros, au niveau fonctionnement, c'est pas mal, mais je voudrais que cela reste rouge si le regex n'est pas vérifié si je fais un blur

comprendre ton code me permettrait de l'ajuster

Merci d'avance pour ton aide et ta patience

>

[Toufik83]

Salut,

/^[\w@\.-_]+$/.... cet regex vérifie si une chaîne de caractère simple

C'est une simple expression régulière qui autorise seulement les lettres, les chiffres et les caractères ( "-" "_" "." "@").

là j'ai un peu plus de mal à comprendre (je débute). C'est comme une condition if ?

Oui, c'est bien une condition if, mais avec la syntaxe ternaire. le premier bloc "?" correspond à "vrai" et le deuxième bloc ":" correspond à "faux", c'est comme si on avait mis :

Code :

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

1
2
3
 
if(e.type == "blur"){verifEmail =regexEmail.test(mail) ;}
else{verifEmail =mail.match(keyupFocus);}

Concernant la dernière condition :

Code :

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

1
2
 
if ((verifEmail == false || verifEmail == null) && mail !="")

Le mail !="" veut dire si la valeur d'email est vide (on l'a inclus dans la condition pour ne pas mettre l'input de l'email en rouge quand elle est vide au moment de focus.)

[Invité]

Bonjour,

Alors ça, c'est de la GROOOOOSSSSE ARTILLERIE !

On peut faire plus simple, non ?

Code html :

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

<input id="mail" name="mon_email" />

Code css :

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

1
2
3
input { background-color:white; color:black; }
input.is_ok { background-color:green; color:white; }
input.is_ko { background-color:red; color:white; }

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
$("input#mail").on('focus keyup',function () {
  $(this).removeClass('is_ok is_ko');
});
$("input#mail").on('blur',function () {
  var regexEmail = /^\w+([\.-]?\w+)*@\w+([\.-_]?\w+)*(\.\w{2,3})+$/;
  if ( !regexEmail.test($(this).val()) ) {
    $(this).addClass('is_ko');
  } else {
    $(this).addClass('is_ok');
  };
});

N.B. Et je rappelle, au cas-z-où, qu'il existe <input type="email" /> !

Code html :

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

1
2
<input type="email" name="mon_email" />
<input type="email" name="mon_email_2" />

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
$("input[type=email]").on('focus keyup',function () {
  $(this).removeClass('is_ok is_ko');
});
$("input[type=email]").on('blur',function () {
  if ($(this).is(':invalid')) { // PAS BESOIN DE REGEX : on utilise le test de validation du navigateur
    $(this).addClass('is_ko');
  } else {
    $(this).addClass('is_ok');
  };
});

[CosmoKnacki]

C'est une simple expression régulière qui autorise seulement les lettres, les chiffres et les caractères ( "-" "_" "." "@").

Ainsi que les caractères / : ; < = > ? [ \ ] ^. Par contre il n'autorise pas le caractère - qui dans la pattern définit un rang de caractères entre le point et le underscore. (underscore qui est d'ailleurs déjà compris dans \w.)

Donc pour reprendre l'idée, ce serait plutôt: /^[\w@.-]+$/ sans l'échappement du point qui n'est pas utile dans une classe de caractères.

[Toufik83]

Oui CosmoKnacki, je l'avais remarqué aussi, il fallait échapper le - pour qu'il l'autorise.

Pour les autres caractères / : ; < = > ? [ \ ] ^, je pense qu'il est obligé de les vérifier peut être avec indexOf ou bien des conditions personnalisées....
Il y'a surement mieux...

[CosmoKnacki]

À propos des "autres caractères", je voulais juste dire qu'ils étaient inclus dans le rang .-_ (ce qui correspond aux caractères ./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_).
Si on supprime ce rang soit en mettant le - au début ou à la fin de la classe, soit en l'échappant, c'est autres caractères n'y figureront plus.

[sebgac]

Bonjour,

Alors ça, c'est de la GROOOOOSSSSE ARTILLERIE !

On peut faire plus simple, non ?

Code html :

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

<input id="mail" name="mon_email" />

Code css :

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

1
2
3
input { background-color:white; color:black; }
input.is_ok { background-color:green; color:white; }
input.is_ko { background-color:red; color:white; }

Bonjour et merci pour ta réponse ! c'est une super astuce, je n'y avais pas pensé. Si je comprends bien, on va vérifier la regex seulement au moment du blur. A chaque focus / keyup on va retirer la couleur OK/KO. C'est bien pensé mais ce n'est pas ce que je veux faire. Je voudrais aussi que lors d'un keyup, la verif ne fasse en direct à chaque event. Mais je ne veux pas qu'il se fasse lors du premier focus, juste à partir du second focus (je veux laisser à l'utilisateur le bénéfice du premier essai, après le premier blur, faire la vérif, et ensuite, faire une vérification en direct keyup que cela soit focus ou blur)

[sebgac]

Salut, ...

Code :

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

1
2
3
 
if(e.type == "blur"){verifEmail =regexEmail.test(mail) ;}
else{verifEmail =mail.match(keyupFocus);}

Merci Toufik pour tes réponses

La différence entre regexEmail.test(mail) et mail.match(keyupFocus) > c'est seulement une façon différente de tester la regex si je comprends bien

Pour l'instant, ça fonctionne pas trop mal, je voudrais juste lorsque je reviens en focus (excepté le premier focus), que cela me colorie toujours en rouge jusqu'au moment où le regex est vérifiée. Je cherche une solution. Au départ, je me disais, il suffit de compter le nombre de focus, et de mettre une condition if à partir du moment où le nombre d'event focus comptabilisé est supérieur à un. Je vais essayer cela et je reviens.

[Invité]

Bonjour,

tu ne voudrais pas en plus que ton input chante la Traviata ?


Toufik83 t'a écrit un code fonctionnel, moi deux.
C'est bon.

N.B. Et je rappelle, au cas-z-où, qu'il existe <input type="email" /> !

<input type="email"> est largement suffisant pour vérifier un email.

Il existe aussi "tel", "url",... et l'attribut pattern.

[sebgac]

Bonjour,

tu ne voudrais pas en plus que ton input chante la Traviata ?

et pourquoi pas ? c'est une nécessité d'UX design. Je sais bien que les développeurs purs n'ont pas tous cette sensibilité, mais si je me pose la question, c'est qu'il y a une raison Il est possible de tout faire en codant, je connais bien l'input type email, mais je ne souhaite pas non plus utiliser cette fonction pour ce code là, je souhaite pouvoir développer mon propre comportement via javascript. C'est une manière d'apprendre, aussi.

[Invité]

... je souhaite pouvoir développer mon propre comportement via javascript....

LOL !
En l'occurrence, c'est NOUS qui codons !!
Pas toi !

A TOI maintenant de mettre les mains dans le cambouis !...

[sebgac]

A TOI maintenant de mettre les mains dans le cambouis !...

Oui, c'est ce que je suis en train de faire. Je pense que vous m'avez donné les armes pour réussir, j'ai déjà appris plein de choses sur ce topic. Après tout, vous pouvez aussi me donner votre avis, sans coder. Une indication algorythmique par exemple. Si Toufik veut m'aider, c'est son problème d'ailleurs Tu n'es pas obligé de le faire, mais tu veux bien, je te serai reconnaissant d'aider un débutant comme moi.

EDIT :

Voilà, je pense que j'ai réussi :

Code javascript :

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
$("input#mail").on('blur keyup focus', function (e) {
 
            var mail = $(this).val().trim();
 
            if (e.type == "focus") {
                nbFocus++;
            }
 
            // on adapte la condition selon l'événement
 
            if (e.type == "blur") {
                verifEmail = regexEmail.test(mail);
            } else {
                if (nbFocus <=1) {
                    console.log('OK1');
                    verifEmail = mail.match(regexEmailKeyupFocus);
                } else {
                    console.log('OK2');
                    verifEmail = regexEmail.test(mail);
                }
            };
 
            if ((verifEmail == false || verifEmail == null) && mail != "") {
                $(this).css('color', 'red');
            } else {
                $(this).css('color', 'white');
            }
        });

Merci à tous pour votre aide, je suis bien content d'avoir réussi ce que je voulais grâce à vous

[Invité]

Juste un conseil, alors...

Si tu veux que ça puisse s'appliquer à plusieurs input (2 emails dans le formulaire,...), met une classe "mail" au lieu d'un id.

Code html :

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

<input class="mail" .................. />

Puis :

Code :

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

$("input.mail").on('blur keyup focus', function (e) {

Et pour peu que ces champs soient dynamiques (via Ajax,...), on délègue :

Code :

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

$("form").on('blur keyup focus', "input.mail", function (e) {

Ici, la balise <form> doit être présente dans le DOM au chargement.
Sinon, il faut remonter plus haut :

Code :

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

$("body").on('blur keyup focus', "input.mail", function (e) {

[NoSmoking]

Bonjour,

Rappel au cas où !
C'est côté serveur que doivent s’effectuer les « vraies vérifications », trop facile de modifier le type d'un élément <input> et de désactiver le JavaScript

[CosmoKnacki]

Certes, mais c'est là le grand malheur entre le coté client et le coté serveur, car si PHP dispose d'un filtre de validation idoine FILTER_VALIDATE_EMAIL (qui vaut ce qu'il vaut), le reproduire coté client avec Javascript tient du morceau de bravoure (ou de la bravitude pour Ségolène Royal, on en rie encore).
Le fait est qu'on est obligé:

• soit de passer par ajax pour obtenir le résultat de ce filtre coté serveur
• soit d'avoir un double discours: ton email est bien formaté coté client mais mal formaté coté serveur, ce qui est à mon avis inacceptable.

Donc au final, se la jouer à la cool en faisant les mêmes validations basiques de part et d'autre, ce qui d'un coté abaisse la barre des exigences, responsabilise l'utilisateur sur ce qu'il tape et sur la syntaxe de l'adresse email qu'il a choisi, me semble être la meilleur solution.

[sebgac]

Juste un conseil, alors...
[/CODE]

Ok, merci. Pourquoi une classe plutot qu'un ID ?

Le principe de la délégation, c'est pour que cela soit pris en compte si on change dynamiquement un truc dans la page ?

[sebgac]

Bonjour,

Rappel au cas où !
C'est côté serveur que doivent s’effectuer les « vraies vérifications », trop facile de modifier le type d'un élément <input> et de désactiver le JavaScript

merci

[Invité]

• Un id doit être UNIQUE
• Une classe peut s'appliquer à plusieurs éléments