Amélioration de code

**flodereims** · 20/12/2023, 22h08

Bonjour,
J'ai fait un petit code d'inscription/connexion pour un utilisateur, mais j'ai l'impression que mon code est trop gros, qu'il peut être amélioré, et je trouve que ça fait beaucoup de répétitions.
Pourriez vous me dire comment améliorer mon code, et me dire ce qui ne va pas ?
Car en gros là, j'ai un validationRegister.js et un validateurLogin.js (+ évidemment un register.php et un login.php avec le html/php pour le traitement, et dans chaque input de register et de login, je vais avoir #emailRegister, #emailLogin... #passwordRegister, #passwordLogin.... etc)
Si vous avez besoin du HTML/PHP je peux vous le montrer.
Merci d'avance.

Register.js

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
$(document).ready(function(){
 
    $("#emailRegister").keyup(function() {
        if(checkEmailRegister()) {
            $("#emailError").hide();
            $("#emailRegister").css("border", "1px solid green");
        } else {
            $("#emailRegister").css("border", "1px solid red");
        }
    });
 
    $("#passwordRegister").keyup(function() {
        if(checkPasswordRegister()) {
            $("#passwordError").hide();
            $("#passwordRegister").css("border", "1px solid green");
        } else {
            $("#passwordRegister").css("border", "1px solid red");
        }
    });
 
    $("#passwordConfirmRegister").keyup(function() {
        if(checkPasswordConfirmRegister()) {
            $("#passwordConfirmError").hide();
            $("#passwordConfirmRegister").css("border", "1px solid green");
        } else {
            $("#passwordConfirmRegister").css("border", "1px solid red");
        }
    });
 
    $("#btn_register").click(function(e) {
        e.preventDefault();
 
        checkEmailRegister();
        checkPasswordRegister();
        checkPasswordConfirmRegister();
 
        var emailRegister       = $("#emailRegister").val(); 
        var passwordRegister    = $("#passwordRegister").val(); 
 
        if(checkEmailRegister() && checkPasswordRegister() && checkPasswordConfirmRegister()) {
 
            $.ajax({
                url: "register.php",
                method: "POST",         
                data: {emailRegister:emailRegister, passwordRegister:passwordRegister},
                success:function(data) {
 
                    if(data == "1") {
                        $("#emailError").show();
                        $("#emailError").html("L'e-mail est déjà enregistré");
                        $("#emailRegister").css("border", "1px solid red");         
                    }
 
                    if(data == "2") {
 
                        $("#emailRegister").css("border", "none");
                        $("#passwordRegister").css("border", "none");
                        $("#passwordConfirmRegister").css("border", "none");
 
                        $("#btn_register").html("<div class='loader'></div>");
                        setTimeout(() => {
                            window.location.replace("http://localhost/Membre/login.php");
                        }, 3000);
 
                    }
 
                }
            });
        }
 
    });
});
 
function checkEmailRegister() {
 
    var regex           = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
    var emailRegister   = $("#emailRegister").val();
 
    if(emailRegister == "") {
        $("#emailError").show();
        $("#emailError").html("Ce champs est obligatoire");
        $("#emailRegister").css("border", "1px solid red"); 
        return false;
    }
 
    if(!regex.test(emailRegister)) {
        $("#emailError").show();
        $("#emailError").html("L'adresse n'est pas valide (adresse@email.fr)");
        $("#emailRegister").css("border", "1px solid red"); 
        return false;
    }
    return true;
}
 
function checkPasswordRegister() {
 
    var passwordRegister    = $("#passwordRegister").val();
 
    if(passwordRegister == "") {
        $("#passwordError").show();
        $("#passwordError").html("Ce champs est obligatoire");
        $("#passwordRegister").css("border", "1px solid red");  
        return false;
    } 
 
    if(passwordRegister.length < 8) {
        $("#passwordError").show();
        $("#passwordError").html("Le mot de passe doit avoir au minimun 8 caractères");
        $("#passwordRegister").css("border", "1px solid red");  
        return false;
    }
    return true; // quand il n'y a pas d'erreurs
 
}
 
function checkPasswordConfirmRegister() {
 
    var passwordConfirmRegister             = $("#passwordConfirmRegister").val();
    var passwordRegister            = $("#passwordRegister").val();
 
    if(passwordConfirmRegister == "") {
        $("#passwordConfirmError").show();
        $("#passwordConfirmError").html("Ce champs est obligatoire");
        $("#passwordConfirmRegister").css("border", "1px solid red");   
        return false;
    }
 
    if(passwordConfirmRegister.length < 8) {
        $("#passwordConfirmError").show();
        $("#passwordConfirmError").html("Le mot de passe doit avoir au minimun 8 caractères");
        $("#passwordConfirmRegister").css("border", "1px solid red");   
        return false;
    }
 
    if(passwordConfirmRegister != passwordRegister) {
        $("#passwordConfirmError").show();
        $("#passwordConfirmError").html("Les mots de passe ne correspondent pas");
        $("#passwordConfirmRegister").css("border", "1px solid red");   
        return false;   
    }
    return true; // quand il n'y a pas d'erreurs
 
}

LOGIN.JS

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
$(document).ready(function(){
 
    $("#emailLogin").keyup(function() {
        if(checkEmailLogin()) {
            $("#emailError").hide();
            $("#emailLogin").css("border", "1px solid green");
        } else {
            $("#emailLogin").css("border", "1px solid red");
        }
    });
 
    $("#passwordLogin").keyup(function() {
        if(checkPasswordLogin()) {
            $("#passwordError").hide();
            $("#passwordLogin").css("border", "1px solid green");
        } else {
            $("#passwordLogin").css("border", "1px solid red");
        }
    });
 
    $("#btn_login").click(function(e) {
        e.preventDefault();
 
        checkEmailLogin();
        checkPasswordLogin();
 
        var emailLogin      = $("#emailLogin").val(); 
        var passwordLogin   = $("#passwordLogin").val(); 
 
        if(checkEmailLogin() && checkPasswordLogin()) {
 
            $.ajax({
                url: "login.php",
                method: "POST",         
                data: {emailLogin:emailLogin, passwordLogin:passwordLogin},
                success:function(data) {
 
                    if(data == "1") {
                        $("#emailLogin").css("border", "none");
                        $("#passwordLogin").css("border", "none");
 
                        $("#btn_login").html("<div class='loader'></div>");
                        setTimeout(() => {
                            window.location.replace("http://localhost/Membre/index.php");
                        }, 3000);           
                    }
 
                    if(data == "2") {
                        $("#passwordError").show();
                        $("#passwordError").html("L'e-mail ou le mot de passe est incorrect");
                        $("#emailLogin").css("border", "1px solid red");
                        $("#passwordLogin").css("border", "1px solid red");
 
                    }
 
                }
            });
        }
 
    });
});
 
function checkEmailLogin() {
 
    var regex       = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
    var emailLogin  = $("#emailLogin").val();
 
    if(emailLogin == "") {
        $("#emailError").show();
        $("#emailError").html("Ce champs est obligatoire");
        $("#emailLogin").css("border", "1px solid red");    
        return false;
    }
 
    if(!regex.test(emailLogin)) {
        $("#emailError").show();
        $("#emailError").html("L'adresse n'est pas valide (adresse@email.fr)");
        $("#emailLogin").css("border", "1px solid red");    
        return false;
    }
    return true;
}
 
function checkPasswordLogin() {
 
    var passwordLogin   = $("#passwordLogin").val();
 
    if(passwordLogin == "") {
        $("#passwordError").show();
        $("#passwordError").html("Ce champs est obligatoire");
        $("#passwordLogin").css("border", "1px solid red"); 
        return false;
    } 
    return true; // quand il n'y a pas d'erreurs
 
}

**Toufik83** · 21/12/2023, 14h50

Bonjour,

Vous pouvez utiliser plusieurs identificateurs dans le même sélecteur jQuery en les séparant par une virgule, par exemple au lieu de $("#emailLogin").keyup(function() {...}); et $("#emailRegister").keyup(function() {...});, vous pouvez les grouper dans une seule fonction :

Code :

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

1
2
3
4
5
6
7
8
$("#emailLogin,#emailRegister").keyup(function() {
   if($(this).attr('id')=="emailLogin"){
      //code pour emailLogin...
   }
   else if($(this).attr('id')=="emailRegister"){
      //code pour emailRegister...
   }
});

C'est le même principe pour les autres éléments, rien ne vous empêche de gérer plusieurs sélecteurs avec la même fonction jQuery.

**flodereims** · 21/12/2023, 16h48

Merci pour ce conseil, je ne savais pas !
Je vais essayer de suite, si vous voyez d'autres choses, n'hésitez pas à me les dires

**mathieu** · 22/12/2023, 18h14

les navigateurs actuels proposent de plus en plus d'améliorations dans l'utilisation du code javascript donc jquery n'est plus très utile.
cette remarque est surtout pour vos prochains projets, ne vous embêtez pas à réécrire votre code actuel pour retirer jquery.
si vous avez beaucoup d'habitudes dans l'utilisation de jquery, je vous conseille de garder les url suivants qui donnent beaucoup d'exemples de remplacement de jquery par du code javascript direct :
https://youmightnotneedjquery.com/
https://github.com/camsong/You-Dont-...r/README-fr.md

en ce qui concernent votre code, vous avez déjà le bon réflexe de remarquer qu'il y a des répétitions. souvent vous pouvez les remplacer par des fonctions ou des boucles.
par exemple si on se base sur ce code :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
     if (emailRegister == "") {
        $("#emailError").show();
        $("#emailError").html("Ce champs est obligatoire");
        $("#emailRegister").css("border", "1px solid red"); 
        return false;
    }
 
    if (passwordRegister.length < 8) {
        $("#passwordError").show();
        $("#passwordError").html("Le mot de passe doit avoir au minimun 8 caractères");
        $("#passwordRegister").css("border", "1px solid red");
        return false;
    }

il peut être simplifié en utilisant une fonction comme cela :

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
function affiche_erreur(nom_champ, message)
{
 
	$("#" + nom_champ + "Error").show();
	$("#" + nom_champ + "Error").html(message);
	$("#" + nom_champ + "Register").css("border", "1px solid red");
 
}
 
    if (emailRegister === "") {
        affiche_erreur("email", "Ce champs est obligatoire");
        return false;
    }
 
    if (passwordRegister.length < 8) {
        affiche_erreur("password", "Le mot de passe doit avoir au minimun 8 caractères");
        return false;
    }

et ce code peut encore être simplifié en utilisant une classe css au lieu de modifier la propriété css.
et vous pouvez aussi utiliser des classes css au lieu de donner un identifiant à chaque balise. je suppose que vous avez un code de ce genre :

Code html :

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

1
2
3
4
<input id="emailRegister" type="text"/>
<div id="emailError"></div>
<input id="passwordRegister" type="text"/>
<div id="passwordError"></div>

vous pouvez changer sa structure comme cela :

Code html :

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

1
2
3
4
5
6
7
8
<div id="email" class="conteneur_champ">
	<input type="text"/>
	<div class="message_erreur"></div>
</div>
<div id="password" class="conteneur_champ">
	<input type="text"/>
	<div class="message_erreur"></div>
</div>

**flodereims** · 22/12/2023, 18h20

Merci beaucoup pour les précisions ! En effet pour la fonction du message d'erreur j'avais commencé a le faire mais je ne suis pas allé au bout ! C'est super intéressant merci! Je vais corriger tout ça !

Amélioration de code

jQuery

Discussions similaires

Partager

Partager