Changement de couleur texte avec addEventListener "change"

Résolu
rdbn Messages postés 95 Date d'inscription   Statut Membre Dernière intervention   -  
rdbn Messages postés 95 Date d'inscription   Statut Membre Dernière intervention   -
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

jordane45 Messages postés 38484 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
Bonjour
Juste te créer deux class css.... Le code js ne changera pas
0
rdbn Messages postés 95 Date d'inscription   Statut Membre Dernière intervention  
 
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 !
0