Changement de couleur texte avec addEventListener "change"

[Résolu]
Signaler
Messages postés
59
Date d'inscription
samedi 3 avril 2021
Statut
Membre
Dernière intervention
28 juin 2021
-
Messages postés
59
Date d'inscription
samedi 3 avril 2021
Statut
Membre
Dernière intervention
28 juin 2021
-
Bonjour,

(js/jquery)

Je n'arrive pas à résoudre le changement de couleur du texte dans ma balise small grâce
addEventListener "change".
Explication, s-i dans mon input la saisie correspond à ma regexp le message s'affiche en couleur1 sinon couleur2.
novice en js/jquery.
Par ailleur j'ai réussie à réalisé ceci grâce à la fonction classList avec bootstrap.
Mais comme je ne veux pas utilisé bootstrap, je me retrouve bloqué.. J'ai essayé plusieurs chose mais en vain.
<form action="" method="post" id="form-check">
<div class="field name">
<input type="text" name="nom" id="nom" placeholder="Nom*">
<small class="error"></small>
 </div>
</form>

mon html
 let form= document.querySelector("#form-check");

    form.nom.addEventListener("change", function(){
        validNom(this);
    });
    const validNom= function(inputNom) {
        //Name regExp 
        let nomRegExp= new RegExp(/^[A-Za-z]+((\s)?((\'|\-|\.)?([A-Za-z])+))*$/);
        //Recuperation tag small : display
        let small= inputNom.nextElementSibling;
        //TEST RegExp
        if(nomRegExp.test(inputNom.value)) {
            small.textContent= "Saisie valide";
            small.classList.remove('text-danger');
            small.classList.add('text-warning');
            return true;
        }
        else {
            small.textContent= "Saisie non valide";
            small.classList.remove('text-warning');
            small.classList.add('text-danger');
            return false;
        }
    };

mon js
En ajoutant les textes text-danger(rouge) et text-warning(jaune) propre à bootstrap, le changement à bien lieux à chaque saisie true ou false.

comment pourrais-je le réalisé sans bootpstrap ?
j'ai essayé de mettre dans classe, warning et danger (class="warning danger") pour les récupérés sur css via
small.danger { color: red; }
small.warning { color: yellow; }

pour ensuite l'utilisé dans js de cette manière
 if(nomRegExp.test(inputNom.value)) {
            small.textContent= "Saisie valide";
            small.$('.danger').remove();
            small.$('.warning').add();
            return true;
        }

ceci ne fonctionne pas.
Si vous pouvez me guidé..
merci pour votre attention.

Configuration: Windows / Chrome 91.0.4472.106

2 réponses

Messages postés
33212
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
4 août 2021
3 657
Bonjour
Juste te créer deux class css.... Le code js ne changera pas
Messages postés
59
Date d'inscription
samedi 3 avril 2021
Statut
Membre
Dernière intervention
28 juin 2021

Bonjour,
j'ai passé tellement de temps dessus au point de ne plus voir, je partais un peu partout.., alors que c'était aussi simple que ca merci pour ta réactivé +1 !