Validation formulaire

Résolu
ameb2908 Messages postés 92 Date d'inscription jeudi 17 mars 2022 Statut Membre Dernière intervention 27 janvier 2025 - 6 nov. 2024 à 14:34
ameb2908 Messages postés 92 Date d'inscription jeudi 17 mars 2022 Statut Membre Dernière intervention 27 janvier 2025 - 14 nov. 2024 à 09:31

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

4 réponses

jordane45 Messages postés 38428 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 18 février 2025 4 735
6 nov. 2024 à 16:43

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 ?


0
ameb2908 Messages postés 92 Date d'inscription jeudi 17 mars 2022 Statut Membre Dernière intervention 27 janvier 2025 1
6 nov. 2024 à 17:31

J'ai les messages d'erreurs du champ username et pas d'userpass

0
jordane45 Messages postés 38428 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 18 février 2025 4 735
6 nov. 2024 à 17:59

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();
})();
1
ameb2908 Messages postés 92 Date d'inscription jeudi 17 mars 2022 Statut Membre Dernière intervention 27 janvier 2025 1
8 nov. 2024 à 18:30
(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.

0
jordane45 Messages postés 38428 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 18 février 2025 4 735
11 nov. 2024 à 20:09

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 ! 

0
ameb2908 Messages postés 92 Date d'inscription jeudi 17 mars 2022 Statut Membre Dernière intervention 27 janvier 2025 1
14 nov. 2024 à 09:31

Bonjour, finalement ça marche nickel, merci de votre aide & bonne journée

0