Controlar el comportamiento de un formulario es una de las tareas más frecuentes al trabajar con JavaScript en el navegador. Saber cómo prevenir el envío automático, acceder a los valores de cada campo y validar la información antes de procesarla marca la diferencia entre una experiencia de usuario fluida y una frustrante.
¿Qué validaciones trae HTML por defecto en los formularios?
Antes de escribir una sola línea de JavaScript, HTML ya ofrece mecanismos de validación integrados que conviene conocer. Cuando un <input> tiene el atributo type="text" y se le agrega required, el navegador impide enviar el formulario si el campo está vacío [0:25]. Sin embargo, esa validación es muy básica: acepta una sola letra, un número o cualquier carácter.
El caso del type="email" es más interesante. Este tipo de input incluye una validación propia que exige al menos una arroba y una dirección con formato mínimo [1:07]. Si el usuario escribe solo una letra y pulsa enviar, el navegador le indica que falta la arroba. Si agrega la arroba sin dominio, le advierte que la dirección está incompleta. Estas validaciones nativas son útiles, pero no suficientes para escenarios reales.
¿Cómo prevenir el comportamiento por defecto con preventDefault?
Cuando un formulario tiene un botón de tipo submit, su comportamiento por defecto es recoger los datos e intentar enviarlos a un servidor, lo que provoca que la página se refresque y la información escrita desaparezca [1:50]. En la URL se pueden observar los parámetros enviados, pero el usuario pierde todo lo que había escrito.
Para tomar el control completo del formulario desde JavaScript, es necesario prevenir ese comportamiento. El primer paso es obtener una referencia al formulario:
javascript
const form = document.getElementById('myForm');
Después se agrega un event listener para el evento submit. Dentro de la función callback, se recibe el objeto del evento y se llama a preventDefault() [4:50]:
javascript
form.addEventListener('submit', function(event) {
event.preventDefault();
});
Con event.preventDefault() se le indica al navegador que no ejecute la acción predeterminada del evento. La página deja de refrescarse, los datos permanecen en los campos y el desarrollador puede procesarlos como desee.
¿Qué es form.elements y cómo acceder a los valores de cada input?
Una vez prevenido el comportamiento por defecto, se necesita leer los valores que el usuario escribió. La propiedad form.elements permite acceder a los elementos del formulario buscándolos por su atributo name [5:30]:
javascript
form.addEventListener('submit', function(event) {
event.preventDefault();
const name = form.elements['name'];
console.log(name);
});
Este código devuelve el elemento HTML completo (el input), no su contenido. Para obtener lo que el usuario escribió, se agrega .value [6:40]:
javascript
const name = form.elements['name'].value;
console.log(name);
Ahora la consola muestra exactamente el texto ingresado, como "Diego", en lugar del nodo del DOM.
¿Por qué es importante validar desde JavaScript?
Las validaciones de HTML cubren lo mínimo: campos vacíos y formatos básicos como el de correo electrónico. Desde JavaScript se puede ir mucho más allá:
- Exigir una cantidad mínima de caracteres en el nombre.
- Verificar que el correo contenga arroba, dominio y extensión.
- Mostrar mensajes personalizados al usuario indicando qué falta o qué corregir.
- Enviar la información a un servidor solo cuando todo esté correcto.
El flujo completo queda así: el usuario llena los campos, hace clic en enviar, JavaScript intercepta el evento con preventDefault(), valida cada campo accediendo a sus valores con form.elements y .value, y decide si procesa o rechaza el envío.
Dominar este patrón es fundamental para cualquier aplicación web. ¿Has tenido que implementar validaciones más complejas en tus formularios? Comparte tu experiencia.
