Desafío: Implementar Escuchadores de Eventos
Tarea
Estás construyendo un formulario donde los usuarios pueden enviar sus datos. El objetivo es validar la entrada del usuario, proporcionar retroalimentación en tiempo real mientras escribe y evitar el envío del formulario si la entrada no es válida.
- Retroalimentación en Tiempo Real:
- Escuchar los cambios mientras el usuario escribe;
- Dentro del manejador de eventos, verificar la longitud del valor ingresado;
- Si es menor a 3 caracteres, establecer el contenido del
<p>
con IDfeedback
en"Name is too short."
; - Si tiene 3 caracteres o más, establecer
feedback
en"Name looks good!"
.
- Prevenir el Envío Predeterminado del Formulario:
- Escuchar los envíos del formulario;
- Detener el comportamiento predeterminado de envío del formulario;
- Verificar el valor ingresado;
- Si es menor a 3 caracteres, mostrar
"Please enter a longer name"
en el<p>
con IDform-message
; - Si tiene 3 caracteres o más, mostrar
"Form submitted successfully!"
enform-message
.
index.html
index.css
index.js
- Utilizar el evento
input
para escuchar los cambios mientras el usuario escribe; - Utilizar
event.target.value.length < 3
para verificar la longitud del valor ingresado; - Utilizar el evento
submit
para escuchar los envíos del formulario; - Utilizar
event.preventDefault()
para detener el comportamiento predeterminado de envío del formulario; - Utilizar
nameInput.value.length < 3
para verificar el valor ingresado.
index.html
index.css
index.js
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Can you show me how to set up the HTML form and input elements?
What would the JavaScript code look like for this validation?
Can you explain how to connect the feedback messages to the input and form events?
Awesome!
Completion rate improved to 2.22
Desafío: Implementar Escuchadores de Eventos
Desliza para mostrar el menú
Tarea
Estás construyendo un formulario donde los usuarios pueden enviar sus datos. El objetivo es validar la entrada del usuario, proporcionar retroalimentación en tiempo real mientras escribe y evitar el envío del formulario si la entrada no es válida.
- Retroalimentación en Tiempo Real:
- Escuchar los cambios mientras el usuario escribe;
- Dentro del manejador de eventos, verificar la longitud del valor ingresado;
- Si es menor a 3 caracteres, establecer el contenido del
<p>
con IDfeedback
en"Name is too short."
; - Si tiene 3 caracteres o más, establecer
feedback
en"Name looks good!"
.
- Prevenir el Envío Predeterminado del Formulario:
- Escuchar los envíos del formulario;
- Detener el comportamiento predeterminado de envío del formulario;
- Verificar el valor ingresado;
- Si es menor a 3 caracteres, mostrar
"Please enter a longer name"
en el<p>
con IDform-message
; - Si tiene 3 caracteres o más, mostrar
"Form submitted successfully!"
enform-message
.
index.html
index.css
index.js
- Utilizar el evento
input
para escuchar los cambios mientras el usuario escribe; - Utilizar
event.target.value.length < 3
para verificar la longitud del valor ingresado; - Utilizar el evento
submit
para escuchar los envíos del formulario; - Utilizar
event.preventDefault()
para detener el comportamiento predeterminado de envío del formulario; - Utilizar
nameInput.value.length < 3
para verificar el valor ingresado.
index.html
index.css
index.js
¡Gracias por tus comentarios!