Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre averti
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    682
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 682
    Points : 359
    Points
    359

    Par défaut Classe de classList.add non prise en compte

    Bonjour à tous,
    Dans l'instruction suivante
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    force.classList.add('force', 'force-error');
    la classe 'force-error' n'est pas prise en compte. J'ai essayé de modifier son nom en forceError mais sans succès. Le problème est le même pour les autres conditions (lignes 45 à 64)
    Je vous donne ci-dessous le code complet de l'écouteur, du css et le DOM. Avez-vous besoin de plus d'informations?
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    myForm.pw.addEventListener('keyup', function(e) {
     
    	const
    		majRegex	= /[A-Z]/g,	// Présence de majuscules
    		minRegex	= /[a-z]/g,	// Présence de minuscules
    		nbrRegex	= /[0-9]/g,	// Présence de chiffres
    		speRegex	= /\W/g,	// Présence de caractères spéciaux
    		// Proposition de CosmoKnacki dans https://www.developpez.net/forums/d1927929/javascript/general-javascript/signifie-signe-egal-expression-reguliere/#post10684413
    		// Doit contenir des majuscules, des minuscules, des chiffres et des caractères spéciaux
    		strongRegex	= /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).{6,}$/,
    		// Doit contenir soit des majuscules et des minuscules soit des minuscules et des chiffres
    		mediumRegex	= /^(?:(?=.*[A-Z])(?=.*[a-z0-9])|(?=.*[a-z])(?=.*[0-9])).{6,}$/,
    		// Doit contenir au moins 6 caractères
    		simpleRegex	= /(?=.{6}).*/;
     
    		// Effacement des classes antérieures
    		force.classList.remove('force', 'force-success', 'force-middle', 'force-weak', 'force-error');
    		force.classList.add('force-no');
     
    		// Effacement des messages antérieurs
    		force.innerHTML = '';
     
    		// Table des regex vérifiées
    		let arrRegex = [
    			majRegex.test(myForm.pw.value),
    			minRegex.test(myForm.pw.value),
    			nbrRegex.test(myForm.pw.value),
    			speRegex.test(myForm.pw.value)
    		];
    		// Composition du message
    		let	msg = '',
    			end = '';
     
    		// Création des nouveaux messages
    		if ( !arrRegex[0] ) { end += textes[6] + ', '; }
    		if ( !arrRegex[1] ) { end += textes[7] + ', '; }
    		if ( !arrRegex[2] ) { end += textes[8] + ', '; }
    		if ( !arrRegex[3] ) { end += textes[9] + ', '; }
    		end = end.slice(0, -2) + '.';
     
    		if ( myForm.pw.value === '' )
    		{
    			force.classList.add('force-no');
    		}
    		else if ( strongRegex.test(myForm.pw.value) )
    		{
    			force.innerHTML = textes[2]; // mot de passe correct
    			force.classList.remove('force-no');
    			force.classList.add('force', 'force-strong');
    		}
    		else if ( mediumRegex.test(myForm.pw.value) )
    		{
    			msg = textes[3] + ' ' + end;
    			force.innerHTML = msg; // Mot de passe moyen
    			force.classList.remove('force-no');
    			force.classList.add('force', 'force-medium');
    		}
    		else if ( simpleRegex.test(myForm.pw.value) )
    		{
    			msg = textes[4] + ' ' + end;
    			force.innerHTML = msg; // Mot de passe faible
    			force.classList.remove('force-no');
    			force.classList.add('force', 'force-weak');
    		}
    		else
    		{
    			force.innerHTML = textes[5]; // Mot de passe trop court
    			force.classList.remove('force-no');
    			force.classList.add('force', 'force-error');
    		}
    }, false );
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .force
    {
    	background-color:#FFFF99;
    	padding:0 3px;
    	/*color:red;*/
    }
    .force-error
    {
    	color:red;
    	font-weight:bold;
    }
    DOM:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <span class="force" id="force">Mot de passe trop court. Il doit comporter au moins 6 caractères.</span>

  2. #2
    Membre émérite
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    juin 2006
    Messages
    1 687
    Détails du profil
    Informations personnelles :
    Âge : 49
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2006
    Messages : 1 687
    Points : 2 696
    Points
    2 696

    Par défaut

    t'as fais un console.log(force) pour t'assurer que tu travailles sur le bon element ?
    je ne vois pas ou tu initialises la variable force

    sinon, t'as quoi comme erreur dans la console ?
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

  3. #3
    Membre averti
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    682
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 682
    Points : 359
    Points
    359

    Par défaut

    Je n'ai aucune erreur dans la console.
    force est défini en amont de l'écouteur. J'ai d'ailleurs un "use strict" en début de code ce qui m'oblige à vérifier toutes mes variables.
    J'avais fait et je viens de revérifier avec console.log. force existe bien. Il est déclaré comme ceci:
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    "use strict";
     
    // Déclaration des constantes
    //###########################
     
    const
    	myForm		= window.document.querySelector('form'),
    	loginInput	= window.document.querySelector('#login'),
    	info		= window.document.querySelector('.info'),
    	errJS		= window.document.querySelector('#errJS'),
    	force		= window.document.querySelector('#force'),
    	logins		= fromPHPtoJS.logins;
     
    const textes = [
    	fromPHPtoJS.alerts.login[0],	// Ce pseudo existe déjà, cherchez en un autre.
    	fromPHPtoJS.alerts.login[1],	// Pseudo incorrect.
    	fromPHPtoJS.alerts.password[2],	// Mot de passe correct
    	fromPHPtoJS.alerts.password[3],	// Mot de passe moyen
    	fromPHPtoJS.alerts.password[4],	// Mot de passe faible
    	fromPHPtoJS.alerts.password[0],	// Mot de passe trop court
    	fromPHPtoJS.alerts.password[5],	// majuscules
    	fromPHPtoJS.alerts.password[6],	// minuscules
    	fromPHPtoJS.alerts.password[7],	// chiffres
    	fromPHPtoJS.alerts.password[8],	// caractères spéciaux
    ];
    Et pour être complet j'ajoute la ligne de code html correspondante:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <label for="pw"><?= ABO_LBL_PWD; ?></label><input type="password" name="pw" id="pw" required /> <span id="force"></span><br/>

  4. #4
    Membre chevronné
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    1 693
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 1 693
    Points : 2 068
    Points
    2 068

    Par défaut

    Citation Envoyé par moimp Voir le message
    la classe 'force-error' n'est pas prise en compte.
    Comment le sais-tu ? Uniquement par le visuel (c'est-à-dire tu regardes si le style CSS est appliqué ou non) ? Le mieux serait que tu regardes l’élément dans l’inspecteur (touche F12) pour voir si la class en question est bien ajoutée...

  5. #5
    Membre averti
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    682
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 682
    Points : 359
    Points
    359

    Par défaut

    C'est bien ce que je fais. La dernière ligne de #1 est issue du DOM de l'inspecteur IE. On y voit bien qu'une seule classe. De même lorsque je regarde les styles de l'élément #force dans l'inspecteur, on voit bien que seule la classe 'force' est prise en compte.

  6. #6
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    6 075
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 6 075
    Points : 22 084
    Points
    22 084
    Billets dans le blog
    60

    Par défaut

    Citation Envoyé par moimp Voir le message
    [***] issue du DOM de l'inspecteur IE. [***].
    IE est incompatible avec classList !

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  7. #7
    Membre averti
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    682
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 682
    Points : 359
    Points
    359

    Par défaut

    Merci. Je cherche une autre solution avec style.

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 386
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 386
    Points : 32 644
    Points
    32 644

    Par défaut

    Bonjour,
    IE est incompatible avec classList !
    • précisons qu'avec IE < 10, point de salut, sauf a utiliser des « polyFill » qui ne manquent pas.
    • avec IE >= 10 prise en compte uniquement du 1er argument donc moins de salut mais cela peut se régler rapidement avec un
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    // IE10 and more
    var oElem = document.getElementById("id-element");
    ["class-1","class-2"].forEach( function(c){
      oElem.classList.add( c);
    });

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Classe non prise en compte
    Par toshiro92 dans le forum ActionScript 3
    Réponses: 1
    Dernier message: 08/03/2010, 09h37
  2. Installation SP2 + RAM non prise en compte
    Par laure_belette dans le forum Windows XP
    Réponses: 3
    Dernier message: 13/10/2005, 13h46
  3. [css] Feuille de style non prise en compte
    Par Neuromancien2 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 29/06/2005, 12h49
  4. [netbeans] Modifications non prises en compte
    Par nadass dans le forum NetBeans
    Réponses: 6
    Dernier message: 07/04/2005, 14h49
  5. Lecture de fichier - dernière ligne non prise en compte
    Par JulienPles dans le forum Algorithmes et structures de données
    Réponses: 3
    Dernier message: 16/03/2005, 12h57

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo