Bonjour, mes icônes ne s'affichent pas.
account-create.html
Code html : 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 <!DOCTYPE html><html lang="fr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Formulaire d'inscription & de connexion</title> <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/account-create.css"> </head> <body> <div id="wrapper"> <div id="box"> <form id="formCnx" action="traitement.html" method="post"> <h1>S'inscrire</h1> <p> <input type="text" name="pseudoForm" id="pseudo" class="input" placeholder="Pseudo"> <span id="iconPseudo"></span> </p> <div id="errorPseudo"></div> <p> <input type="email" name="emailForm" id="email" class="input" placeholder="Adresse mail"> </p> <div id="errorEmail"></div> <p> <input type="password" name="userpassForm" id="userpass" class="input" placeholder="Mot de passe"> </p> <div id="errorPass"></div> <p> <input type="password" name="userpass2Form" id="userpass2" class="input" placeholder="Retaper Mot de passe"> </p> <div id="errorPass2"></div> <input type="submit" name="submitForm" value="Valider" class="input"> </form> <p>Déjà enregistré :<a href="login.html"> connectez-vous</a></p> <p><a href="Forgot_your_password.php">Mot de passe oublié</a></p> </div> </div> <script src="js/account-create.js"></script> </body> </html>
css/account-create.css
Code CSS : 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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110 * { margin: 0; padding: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 16px; } a { text-decoration: none; color: navy; } #wrapper { width: 100%; background-image: linear-gradient(rgb(0, 62, 128), rgb(128, 0, 15)); height: 100vh; display: flex; flex-direction: row; justify-content: center; align-items: center; } #box { background-color: white; width: 25%; padding: 40px; border-radius: 10px; } #formCnx h1 { text-align: center; margin-bottom: 30px; } #formCnx p { margin-bottom: 20px; } .input { width: 100%; padding: 7px 5px; box-sizing: border-box; border-radius: 5px; border: 1px solid gainsboro; outline: none; } #formCnx input[type="submit"] { margin-bottom: 40px; font-size: 20px; cursor: pointer; } #formCnx input[type="submit"]:hover { background-color:burlywood; color: white; } #box > p { margin-bottom: 10px; } /* ========= LES CLASSES DE MISE EN FORME AU CHANGEMENT DES CHAMPS DU FORMULAIRE ========= */ .warning { color: red; } .check { color: green; } .error { color: red; } .bordureRouge { border: 2px solid red; width: 100%; padding: 7px 5px; box-sizing: border-box; border-radius: 5px; } .bordureVert { border: 2px solid green; width: 100%; padding: 7px 5px; box-sizing: border-box; border-radius: 5px; }
js/account-create.js
Code JavaScript : 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 /* ========= LISTE DES FONCTIONS DEBUT ========= */ let validadPseudo = (valeur, pseudoForm) => { let pseudo = document.querySelector('#pseudo'); let iconPseudo = document.querySelector('#iconPseudo'); let errorPseudo = document.querySelector('#errorPseudo'); /*let regexPseudo = /^[a-z]{4}+[0-9]{4}$/gi;*/ if(valeur.value.length > 8) { iconPseudo.innerHTML = '<i class="fa fa-exclamation" aria-hidden="true"></i>'; iconPseudo.classList.remove('check'); iconPseudo.classList.add('warning'); errorPseudo.innerText = "Le champ " + pseudoForm + " ne doît pas dépasser 8 caractères."; errorPseudo.classList.add('error'); pseudo.classList.remove('input'); pseudo.classList.remove('bordureVert'); pseudo.classList.add('bordureRouge'); } else { iconPseudo.innerHTML = '<i class="fa fa-check" aria-hidden="true"></i>'; iconPseudo.classList.remove('warning'); iconPseudo.classList.add('check'); errorPseudo.innerText = ""; errorPseudo.classList.remove('error'); pseudo.classList.remove('input'); pseudo.classList.remove('bordureRouge'); pseudo.classList.add('bordureVert'); } }; /* ========= LISTE DES FONCTIONS FIN ========= */ /* ========= APPEL DES FONCTIONS DEBUT ========= */ let formCnx = document.querySelector('#formCnx'); formCnx.pseudoForm.addEventListener('change', function() { validadPseudo(this, 'Pseudo'); }); /* ========= APPEL DES FONCTIONS FIN ========= */
Merci pour votre aide, bonne soirée.
Partager