Eventos y validación de formularios

Un evento es algo que ocurre en la página, como un clic o una tecla, y JavaScript puede reaccionar a él. Con eventos y validación, una página comprueba lo que escribe una persona antes de usarlo.

Piensa en el formulario para reservar una mesa en la cafetería de la facultad. Si alguien deja el nombre vacío o escribe una edad con letras, el formulario debe avisar al momento.

Un script no se ejecuta cada vez que algo ocurre. Hay que suscribirse. addEventListener recibe el nombre del evento y la función que se ejecutará cuando llegue.

Esa función se llama oyente. Se pasa solo su nombre, sin paréntesis, porque no queremos ejecutarla ahora, sino cuando llegue el evento.

var boton = document.getElementById("tema");

function cambiarTema() {
  document.body.classList.toggle("oscuro");
}

boton.addEventListener("click", cambiarTema);

Un input guarda lo que se escribe en su propiedad value, siempre como texto. Un 19 escrito es el texto "19", no un número.

Al enviar un formulario, el navegador recarga la página. Con evento.preventDefault() se frena ese comportamiento y el script decide qué hacer con los datos.

formulario.addEventListener("submit", function (evento) {
  evento.preventDefault();
  filtrar(campo.value);
});

La página del laboratorio tiene un formulario para filtrar platos. Un grep con la opción -E muestra las cinco líneas con form, label, input y los dos button. El texto de la página está en inglés: Filter es filtrar.

Fíjate en que el label apunta al input con for="word" y que el botón del formulario es de tipo submit.

docker exec jupyter grep -n -E "<form|<label|<input|<button" site/index.html

Una validación es una comprobación con una regla clara. Por ejemplo, el nombre no está vacío, el correo tiene una arroba y la edad está entre 16 y 99.

HTML ayuda con atributos como required, type="email", min y max. Aun así, un script también comprueba, y el servidor comprueba siempre al final.