Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Desafío: Implementar Escuchadores de Eventos | Gestión de Eventos e Interacciones de Usuario en JavaScript
Maestría Avanzada en JavaScript

bookDesafí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.

  1. 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 ID feedback en "Name is too short.";
    • Si tiene 3 caracteres o más, establecer feedback en "Name looks good!".
  2. 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 ID form-message;
    • Si tiene 3 caracteres o más, mostrar "Form submitted successfully!" en form-message.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • 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.html

index.css

index.css

index.js

index.js

copy

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 3. Capítulo 3

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

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

bookDesafí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.

  1. 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 ID feedback en "Name is too short.";
    • Si tiene 3 caracteres o más, establecer feedback en "Name looks good!".
  2. 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 ID form-message;
    • Si tiene 3 caracteres o más, mostrar "Form submitted successfully!" en form-message.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • 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.html

index.css

index.css

index.js

index.js

copy

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 3. Capítulo 3
some-alt