Formularios: submit y preventDefault

Todo lo que un usuario te entrega — el gasto nuevo, el correo, la búsqueda — entra por un formulario. Hoy aprendes el trío que los gobierna: el evento submit, el freno preventDefault, y la lectura de los campos. Con esto, "Mi Bolsillo" por fin recibe gastos escritos por el usuario.

El comportamiento por defecto

Los formularios son más viejos que JavaScript: su diseño original es empacar los datos y LLEVÁRSELOS a otra página del servidor — recargando la actual. Ese es su "comportamiento por defecto", y sigue vivo: si tu form no lo frena, al enviarlo la página se recarga y tu aplicación pierde todo.

Pruébalo con maña: agrega un gasto con el botón, otro presionando Enter desde el campo, y luego intenta uno sin nombre o con valor 0. Tres detalles de calidad que ya trae el código: la validación con salida temprana (el patrón del módulo 3), form.reset() para limpiar, y focus() devolviendo el cursor — el usuario encadena registros sin tocar el mouse.

¿Por qué submit en el form y no click en el botón?

Porque un formulario se envía por MÁS caminos que el clic: Enter en cualquier campo, el teclado de un celular, tecnologías de asistencia. Todos esos caminos disparan submit en el form; el click solo cubre uno. Si escuchas el evento correcto, todos los caminos funcionan gratis — y no le dañas el Enter a nadie.

Y una nota de honestidad sobre la validación: la tuya de JavaScript mejora la EXPERIENCIA (feedback inmediato), pero cualquiera puede saltársela con la consola. La validación que protege datos vive en el servidor — la construirás en los supercursos de backend; en el navegador validas por amabilidad, no por seguridad.

Mini-reto

Mejora el formulario del playground: 1) agrega un <p id="error"></p> y muestra ahí los mensajes de validación con textContent (y límpialo cuando el registro sea exitoso); 2) exige nombre de al menos 3 letras (nombre.length < 3); 3) dale un toque pro: si el valor supera 50000, agrégale al li la clase caro de tu CSS. Formulario, validación y render — el circuito completo.

Qué sigue

Tus listeners ya escuchan clics, teclas y formularios… pero ¿te has preguntado qué pasa cuando haces clic en un elemento que está DENTRO de otro que también escucha? El evento no se queda quieto: SUBE. Ese viaje se llama burbujeo, y entenderlo desbloquea el patrón más elegante del módulo.