Validation formulaire
Résolu
ameb2908
Messages postés
93
Date d'inscription
Statut
Membre
Dernière intervention
-
ameb2908 Messages postés 93 Date d'inscription Statut Membre Dernière intervention -
ameb2908 Messages postés 93 Date d'inscription Statut Membre Dernière intervention -
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
A voir également:
- Validation formulaire
- Whatsapp formulaire opposition - Guide
- Formulaire de réclamation facebook - Guide
- Formulaire de reclamation instagram - Guide
- Temps validation annonce le bon coin - Forum Hotmail / Outlook.com
- Pb retour sur site marchand après validation du paiement - Forum Consommation & Internet
4 réponses
bonjour
ça ne marche pas.... c'est à dire ?
as-tu des erreurs dans la console de ton navigateur ? sinon, peux-tu expliquer en détail en quoi cela ne fonctionne pas ?
J'ai les messages d'erreurs du champ username et pas d'userpass
Dans quel cas ?
Car tu fais des return dans ton code.. et donc tu ne passes pas à la suite... Donc si tu as une erreur dans le username... tu ne verras pas l'erreur dans le userpass...
Perso, pour éviter des répétitions dans ton code, je ferai un truc du genre
function setError(elem,message){
elem.classList.remove('bordure-verte');
elem.classList.add('bordure-rouge');
iconelem.innerHTML = '<i class="fa-solid fa-exclamation fa-2xs" style="color: #8b0000;"></i>';
form.elem.focus();
errorelem.innerText = message;
errorelem.classList.add('erreur-message');
}
function setValid(elem){
elem.classList.remove('bordure-rouge');
elem.classList.add('bordure-verte');
iconelem.innerHTML = '<i class="fa-solid fa-check fa-2xs" style="color: #63E6BE;"></i>';
errorelem.innerText = '';
errorelem.classList.remove('erreur-message');
event.preventDefault();
}
function testUserName(){
let username = document.getElementById('username');
console.log('TEST DU USERNAME');
if(!username.value.trim()) {
setError(username,'Username ne peut être vide !');
return false;
} else if(!regexMail.test(username.value)) {
setError(username,'Indiquez une adresse mail valide !');
return false;
} else {
setValid(username):
return true;
}
}
function testUserPass(){
let regexMail = /^[a-z0-9._-]+@[a-z]+\.[a-z]{2,4}$/;
let regexMin = /[a-z]/;
let regexMaj = /[A-Z]/;
let regexChi = /[0-9]/;
let regexSpe = /,;:!&#"@/;
let userpass = document.getElementById('userpass');
console.log('TEST DU USERPASS');
if(!userpass.value.trim()) {
setError(userpass,'Userpass ne peut être vide !');
return false;
} else if(!regexMin.test(userpass.value)) {
setError(userpass,'Userpass doît contenir des minuscules !');
return false;
} else if(!regexMaj.test(userpass.value)) {
setError(userpass,'Userpass doît contenir des majuscules !');
return false;
} else if(!regexChi.test(userpass.value)) {
setError(userpass,'Userpass doît contenir des chiffres !');
return false;
} else if(!regexSpe.test(userpass.value)) {
setError(userpass,'Userpass doît contenir des caractères spéciaux ,;:!&#"@');
return false;
} else {
setValid(userpass):
return true;
}
}
(function() {
var createMembre = {
init: function() {
window.addEventListener('load', function(event) {
var form = document.getElementById('create-membre');
var errorUsername = document.getElementById('error-username');
var errorUserpass = document.getElementById('error-userpass');
var iconUsername = document.getElementById('icon-username');
var iconUserpass = document.getElementById('icon-userpass');
form.addEventListener('submit', function(event) {
let form = event.target;
console.debug('submit');
let valid1 = true;
let valid2 = true;
valid1 = testUserName();
valid2 = testUserPass();
if(valid1 == false || valid2 == false ){
console.log('valid1',valid1,'valid2',valid2);
event.preventDefault();
return;
}
});
});
}
};
createMembre.init();
})();
(function() {
var createMembre = {
init: function() {
window.addEventListener('load', function(event) {
function setError(element, iconElement, errorElement, message) {
element.classList.remove('bordure-verte');
element.classList.add('bordure-rouge');
iconElement.innerHTML = '<i class="fa-solid fa-exclamation fa-2xs" style="color: #8b0000;"></i>';
form.element.focus();
errorElement.innerText = message;
errorElement.classList.add('erreur-message');
}
function setValid(element, iconElement, errorElement) {
element.classList.remove('bordure-rouge');
element.classList.add('bordure-verte');
iconElement.innerHTML = '<i class="fa-solid fa-check fa-2xs" style="color: #63E6BE;"></i>';
errorElement.innerText = '';
errorElement.classList.remove('erreur-message');
}
function testUserName() {
var username = document.getElementById('username');
var inputUsername = document.getElementsByTagName('input')[0];
var regexMail = /^[a-z0-9._-]+@[a-z]+\.[a-z]{2,4}$/;
var iconUsername = document.getElementsByTagName('span')[0];
var errorUsername = document.getElementsByTagName('div')[1];
console.log('TEST DU USERNAME');
if(!username.value.trim()) {
setError(inputUsername, iconUsername, errorUsername, 'Username ne peut être vide !');
return false;
}
else if(!regexMail.test(username.value)) {
setError(inputUsername, iconUsername, errorUsername, 'Indiquez une adresse mail valide !');
return false;
}
else {
setValid(inputUsername, iconUsername, errorUsername);
return true;
}
}
function testUserPass() {
var userpass = document.getElementById('userpass');
var inputUserpass = document.getElementsByTagName('input')[1];
var regexMin = /[a-z]/;
var regexMaj = /[A-Z]/;
var regexChi = /[0-9]/;
var regexSpe = /,;:!&#"@/;
var iconUserpass = document.getElementsByTagName('span')[1];
var errorUserpass = document.getElementsByTagName('div')[3];
console.log('TEST DU USERPASS');
if(!userpass.value.trim()) {
setError(inputUserpass, iconUserpass, errorUserpass, 'Userpass ne peut être vide !');
return false;
}
else if(!regexMin.test(userpass.value)) {
setError(inputUserpass, iconUserpass, errorUserpass, 'Userpass doît contenir des minuscules !');
return false;
}
else if(!regexMaj.test(userpass.value)) {
setError(inputUserpass, iconUserpass, errorUserpass, 'Userpass doît contenir des majuscules !');
return false;
}
else if(!regexChi.test(userpass.value)) {
setError(inputUserpass, iconUserpass, errorUserpass, 'Userpass doît contenir des chiffres !');
return false;
}
else if(!regexSpe.test(userpass.value)) {
setError(inputUserpass, iconUserpass, errorUserpass, 'Userpass doît contenir des caractères spéciaux ,;:!&#"@');
return false;
}
else {
setValid(inputUserpass, iconUserpass, errorUserpass);
return true;
}
}
var form = document.getElementById('create-membre');
form.addEventListener('submit', function(event) {
var form = event.target;
console.debug('submit');
var validUsername = true;
var validUserpass = true;
validUsername = testUserName();
validUserpass = testUserPass();
if(validUsername === false || validUserpass === false) {
console.log(validUsername, validUserpass);
event.preventDefault();
return;
}
});
});
}
};
createMembre.init();
})();
Bonsoir, ça ne fonctionne toujours pas.
Je te repose encore une fois les mêmes questions :
ça ne marche pas.... c'est à dire ?
as-tu des erreurs dans la console de ton navigateur ? sinon, peux-tu expliquer en détail en quoi cela ne fonctionne pas ?
Fais nous une capture écran de ton navigateur avec la console ouverte !
Expliques nous aussi ce que tu rentres dans ton formulaire... et donnes nous en son code !