Bonjour,
Mon code fonctionne bien pour mon champ username, mais pas pour userpass
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Espace membres - Créer un compte</title>
<link rel="stylesheet" href="images/fontawesome-free-6.6.0-web/css/all.min.css">
<link rel="stylesheet" href="css/create-membre.css">
<script src="js/create-membre.js"></script>
</head>
<body>
<form action="" method="post" id="create-membre">
<fieldset>
<legend>create</legend>
<div class="champ">
<input type="text" name="username" id="username" placeholder="username">
<span id="icon-username"></span>
</div>
<div id="error-username"></div>
<div class="champ">
<input type="password" name="userpass" id="userpass" placeholder="userpass">
<span id="icon-userpass"></span>
</div>
<div id="error-userpass"></div>
</fieldset>
<div>
<input type="submit" value="valider" name="submit">
</div>
</form>
</body>
</html>
(function() {
var createMembre = {
init: function() {
window.addEventListener('load', function(event) {
var form = document.getElementById('create-membre');
var username = document.getElementById('username');
var userpass = document.getElementById('userpass');
var errorUsername = document.getElementById('error-username');
var errorUserpass = document.getElementById('error-userpass');
var iconUsername = document.getElementById('icon-username');
var iconUserpass = document.getElementById('icon-userpass');
var regexMail = /^[a-z0-9._-]+@[a-z]+\.[a-z]{2,4}$/;
var regexMin = /[a-z]/;
var regexMaj = /[A-Z]/;
var regexChi = /[0-9]/;
var regexSpe = /,;:!&#"@/;
form.addEventListener('submit', function(event) {
var form = event.target;
console.debug('submit');
if(!username.value.trim()) {
username.classList.remove('bordure-verte');
username.classList.add('bordure-rouge');
iconUsername.innerHTML = '<i class="fa-solid fa-exclamation fa-2xs" style="color: #8b0000;"></i>';
form.username.focus();
errorUsername.innerText = 'Username ne peut être vide !';
errorUsername.classList.add('erreur-message');
event.preventDefault();
return;
}
else if(!regexMail.test(username.value)) {
username.classList.remove('bordure-verte');
username.classList.add('bordure-rouge');
iconUsername.innerHTML = '<i class="fa-solid fa-exclamation fa-2xs" style="color: #8b0000;"></i>';
form.username.focus();
errorUsername.innerText = 'Indiquez une adresse mail valide !';
errorUsername.classList.add('erreur-message');
event.preventDefault();
return;
}
else {
username.classList.remove('bordure-rouge');
username.classList.add('bordure-verte');
iconUsername.innerHTML = '<i class="fa-solid fa-check fa-2xs" style="color: #63E6BE;"></i>';
errorUsername.innerText = '';
errorUsername.classList.remove('erreur-message');
event.preventDefault();
return;
}
if(!userpass.value.trim()) {
userpass.classList.add('bordure-rouge');
userpass.classList.remove('bordure-verte');
iconUserpass.innerHTML = '<i class="fa-solid fa-exclamation fa-2xs" style="color: #8b0000;"></i>';
form.userpass.focus();
errorUserpass.innerText = 'Userpass ne peut être vide !';
errorUserpass.classList.add('erreur-message');
event.preventDefault();
return;
}
else if(!regexMin.test(userpass.value)) {
userpass.classList.add('bordure-rouge');
userpass.classList.remove('bordure-verte');
iconUserpass.innerHTML = '<i class="fa-solid fa-exclamation fa-2xs" style="color: #8b0000;"></i>';
form.userpass.focus();
errorUserpass.innerText = 'Userpass doît contenir des minuscules !';
errorUserpass.classList.add('erreur-message');
event.preventDefault();
return;
}
else if(!regexMaj.test(userpass.value)) {
userpass.classList.add('bordure-rouge');
userpass.classList.remove('bordure-verte');
iconUserpass.innerHTML = '<i class="fa-solid fa-exclamation fa-2xs" style="color: #8b0000;"></i>';
form.userpass.focus();
errorUserpass.innerText = 'Userpass doît contenir des majuscules !';
errorUserpass.classList.add('erreur-message');
event.preventDefault();
return;
}
else if(!regexChi.test(userpass.value)) {
userpass.classList.add('bordure-rouge');
userpass.classList.remove('bordure-verte');
iconUserpass.innerHTML = '<i class="fa-solid fa-exclamation fa-2xs" style="color: #8b0000;"></i>';
form.userpass.focus();
errorUserpass.innerText = 'Userpass doît contenir des chiffres !';
errorUserpass.classList.add('erreur-message');
event.preventDefault();
return;
}
else if(!regexSpe.test(userpass.value)) {
userpass.classList.add('bordure-rouge');
userpass.classList.remove('bordure-verte');
iconUserpass.innerHTML = '<i class="fa-solid fa-exclamation fa-2xs" style="color: #8b0000;"></i>';
form.userpass.focus();
errorUserpass.innerText = 'Userpass doît contenir des caractères spéciaux ,;:!&#"@';
errorUserpass.classList.add('erreur-message');
event.preventDefault();
return;
}
else {
userpass.classList.remove('bordure-rouge');
userpass.classList.add('bordure-verte');
iconUserpass.innerHTML = '<i class="fa-solid fa-check fa-2xs" style="color: #63E6BE;"></i>';
errorUserpass.innerText = '';
errorUserpass.classList.remove('erreur-message');
event.preventDefault();
return;
}
});
});
}
};
createMembre.init();
})();
Merci pour votre aide.
Windows / Chrome 130.0.0.0
