Sujet Précédent Sujet Suivant

Ajout d'un icône à côté d'un champ de formulaire

Résolu/Fermé
ameb2908 Messages postés 81 Date d'inscription jeudi 17 mars 2022 Statut Membre Dernière intervention 13 avril 2024 - 13 nov. 2022 à 15:07
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 - 13 nov. 2022 à 20:05

Bonjour, j'ai un carré qui s'affiche à la place de l'icône.

Voici mon code :

account-create.html

<!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 &amp; de connexion</title>
    <link rel="stylesheet" href="fontawesome/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

* {
    
    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

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


Windows / Chrome 107.0.0.0

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
13 nov. 2022 à 17:36

Bonjour,

Si tu mets directement l'icone dans ton code html  (donc, sans passer par le javascript) .. est-ce qu'elle s'affiche bien ?

Si la réponse est non, c'est que tu dois mal charger la librairie fontawesome
0
Réponse 2 / 2
ameb2908 Messages postés 81 Date d'inscription jeudi 17 mars 2022 Statut Membre Dernière intervention 13 avril 2024
13 nov. 2022 à 19:18

Effectivement çà venait de ma librairie, maintenant çà marche bien.

Par contre, dans mon navigateur la mise en forme (css) du site de fontawesome n'est pas pris en compte, donc j'ai du mal à aller chercher les informations.
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
13 nov. 2022 à 20:05

Sans nous dire quel navigateur internet tu utilises il sera compliqué de pouvoir t'apporter des solutions...

Quoi qu'il en soit, commence par vider le cache complètement du navigateur

Où change de navigateur internet..

Je marque cette discussion en résolue.

0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
Nom de champs du tableau croisé dynamique non valide
Kazooie123 -
SajDri -

6 réponses
A quoi correspond cette croix sur snapchat
Sbnet -
Lili -

6 réponses
Qui sont les personnes dans mon ajout rapide de Snapchat ?
lobino68 -
m_manolo25 -

21 réponses
Aligner 2 photos côte à côte...
Dri80 -
tkyt -

10 réponses