Discussion :

[moimp]

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>

[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

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

[moimp]

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/>

[Beginner.]

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...

[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.

[danielhagnoul]

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

IE est incompatible avec classList !

[moimp]

Merci. Je cherche une autre solution avec style.

[NoSmoking]

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