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