Sujet Précédent Sujet Suivant

Validation formulaire

Résolu
ameb2908 Messages postés 90 Date d'inscription jeudi 17 mars 2022 Statut Membre Dernière intervention 25 décembre 2024 - 6 nov. 2024 à 14:34
ameb2908 Messages postés 90 Date d'inscription jeudi 17 mars 2022 Statut Membre Dernière intervention 25 décembre 2024 - 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

Réponse 1 / 4
jordane45 Messages postés 38347 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 décembre 2024 4 719
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
Réponse 2 / 4
ameb2908 Messages postés 90 Date d'inscription jeudi 17 mars 2022 Statut Membre Dernière intervention 25 décembre 2024
6 nov. 2024 à 17:31

J'ai les messages d'erreurs du champ username et pas d'userpass
0
jordane45 Messages postés 38347 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 décembre 2024 4 719
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
Réponse 3 / 4
ameb2908 Messages postés 90 Date d'inscription jeudi 17 mars 2022 Statut Membre Dernière intervention 25 décembre 2024
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 38347 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 décembre 2024 4 719
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
Réponse 4 / 4
ameb2908 Messages postés 90 Date d'inscription jeudi 17 mars 2022 Statut Membre Dernière intervention 25 décembre 2024
14 nov. 2024 à 09:31

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

Discussions similaires

Problème de restrictions
SuperAmbi -
Pat -

5 réponses
Impossible d'utiliser ce numéro de téléphone pour la validat
Marie -
MPMP10 -

1 réponse
Impossible d'utiliser numéro de téléphone validation
Rob5 -
Panth33ra -

4 réponses
Je n'arrive plus à récuperer mon compte Outlook
gnulinux_ -
laure -

4 réponses
Quel est le délai de validation sur Le Bon coin?
Ddaavviid -
jeanbern -

1 réponse