Estoy tratando de agregar alguna confirmación a mi formulario usando RegExp. El caso es que uso alguna condición de esa manera, puedo mostrarle al usuario que la entrada es correcta o no. Así que he creado debajo de mi entrada y usando nextElementSibling y después de eso, estoy usando un HTML interno para agregar algo de texto y mostrárselo al usuario. Aquí está el proyecto en mi GitHub https://github.com/Chardema/openclassroomp3.github.io Pero eso no funciona. Es correcto y JS. puede tener acceso a él aquí está mi código
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"); } };y el 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>Gracias por adelantado :)
Algunos mensajes de la consola muestran que su código está bien hasta el punto en que el texto se envía a la página. Esto permite encontrar el error: innerHtml debe ser innerHTML ;
En el fragmento de trabajo, llamé a la función desde el evento onchange de la entrada (así que haga clic fuera de la entrada después de ingresar algo). Si llama por algún otro método, asegúrese de comprobar que la función recibe el elemento y que cada etapa está realizando las tareas que se esperan de ella. También usé 'prueba' como contenido interno del elemento small para asegurarme de que todo fuera como se esperaba.
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>Reemplace .innerHtml por .innerHTML