Classe de classList.add non prise en compte

Version imprimable

Bonjour à tous,
Dans l'instruction suivante

Code:

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:

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:

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:

Mot de passe trop court. Il doit comporter au moins 6 caractères.

11/01/2019, 17h44
Doksuri

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 :koi:

sinon, t'as quoi comme erreur dans la console ?

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:

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:

<label for="pw"><?= ABO_LBL_PWD; ?></label><input type="password" name="pw" id="pw" required /> 

11/01/2019, 19h09
Beginner.

Citation:

Envoyé par moimp

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...
11/01/2019, 19h22
moimp

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.
11/01/2019, 21h41
danielhagnoul

Citation:

Envoyé par moimp

[***] issue du DOM de l'inspecteur IE. [***].

IE est incompatible avec classList !
12/01/2019, 09h08
moimp

Merci. Je cherche une autre solution avec style.
12/01/2019, 10h15
NoSmoking
Bonjour,

Citation:

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:

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); });