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');
  };
});

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

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

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

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