Validación de formularios nativa con Constraint Validation API

Introducción Cargar 50KB de una librería externa solo para validar un email es un error de rendimiento. Los navegadores modernos ya incluyen la Constraint Validation API, que permite validar campos obligatorios, formatos de texto y rangos numéricos de forma nativa. La solución es aprovechar estos métodos internos para una validación instantánea, ligera y accesible.

Solución Rápida (Código)

const input = document.querySelector('#email');

input.addEventListener('input', () => {
    if (input.validity.typeMismatch) {
        input.setCustomValidity("¡Eso no parece un email de Ninja!");
    } else {
        input.setCustomValidity(""); // Limpia el error
    }
    input.reportValidity();
});

Explicación técnica La Constraint Validation API expone el objeto validity en todos los elementos de formulario. Este objeto contiene booleanos como valueMissing, patternMismatch o tooShort, que reflejan el estado del campo en tiempo real basándose en atributos HTML como required, pattern o minlength.

Al usar esta API, el navegador se encarga de la accesibilidad, informando correctamente a los lectores de pantalla sobre los errores. El método setCustomValidity() te permite personalizar los mensajes de error sin perder la integración con el sistema nativo del navegador. Este enfoque mejora el Core Web Vital de carga al eliminar dependencias innecesarias y garantiza que la validación funcione de manera consistente incluso si el JavaScript principal tarda un poco más en cargar.

Conclusión Menos código significa menos errores. Te recomendamos complementar esta lectura con nuestro tutorial sobre Diseño de Formularios Accesibles (WCAG 2.2).