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
$(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
$(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
}