i’m trying to add some confirmation to my form using RegExp The thing is that i use some condition in that way i can show to the user that the input is correct or not So i’ve created a below my input and using nextElementSibling and after that i’m using a innerHtml to add some Text and show it to the user here’s the project on my GitHub https://github.com/Chardema/openclassroomp3.github.io But that doesn’t work The is correct and JS can have access to it here’s my code
const validFirst = function (inputFirst) { let msg; let valid = false; // au moins 2 caractère if (inputFirst.value.length < 2) { msg = "Le prénom est trop court"; } else { msg = "le prenom est correct !!!"; valid = true; } //Affichage //Récupération de la balise Small let small = inputFirst.nextElementSibling; //on test l'expression régulière if (valid) { small.innerHtml = "OK 👨🏼💻"; small.classList.remove("text-danger"); small.classList.add("text-success"); } else { small.innerHtml = "c pas bon cthistoire 🥸"; small.classList.remove("text-success"); small.classList.add("text-danger"); } };
and the HTML
<div class="formData"> <label for= "first">Prénom</label> <input class="text-control" type="text" id="first" name="first" minlength="2" /> <small></small> </div>
Thanks in advance 🙂
Advertisement
Answer
A few console messages show your code is fine up to the point where the text is sent to the page. This allows the error to be found – innerHtml
should be innerHTML
;
In the working snippet, I’ve called the function from the input’s onchange
event (so click outside the input after entering something). If you call by some other method, be sure to check the function receives the element and that each stage is performing the tasks expected of it. I also used ‘test’ as inner content of the small
element to ensure all was as expected.
const validFirst = function (inputFirst) { console.log(inputFirst.value.length); let msg; let valid = false; // au moins 2 caractère if (inputFirst.value.length < 2) { msg = "Le prénom est trop court"; } else { msg = "le prenom est correct !!!"; valid = true; } console.log(valid, msg); //Affichage //Récupération de la balise Small let small = inputFirst.nextElementSibling; console.log(small.innerText); //on test l'expression régulière if (valid) { small.innerHTML = "OK 👨🏼💻"; //small.classList.remove("text-danger"); //small.classList.add("text-success"); } else { small.innerHTML = "c pas bon cthistoire 🥸"; small.classList.remove("text-success"); small.classList.add("text-danger"); } };
<div class="formData"> <label for= "first">Prénom</label> <input class="text-control" type="text" id="first" name="first" minlength="2" onchange="validFirst(this)" /> <small>test</small> </div>