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>