La Constraint Validation API

HTML5 introdujo la validación integrada de formularios mediante atributos: required, type="email", type="number", min, max, pattern, minlength, maxlength. El navegador valida automáticamente al enviar el formulario y muestra mensajes de error, sin necesidad de JS.

:invalid coincide con los campos que no superan la validación; :valid coincide con los campos válidos. :user-invalid (moderno) coincide solo después de que el usuario interactúa, lo que evita mostrar bordes rojos en un formulario intacto. Utilice estas pseudoclases para aplicar estilos a los errores.

Cada control de formulario expone una propiedad validity: un objeto ValidityState con indicadores booleanos: valid, valueMissing, typeMismatch, patternMismatch, rangeUnderflow, tooShort, etc. Inspecciónelo para decidir qué error mostrar.

input.checkValidity() devuelve true si el valor cumple todas las restricciones y false en caso contrario. form.checkValidity() comprueba todo el formulario. Es útil para realizar comprobaciones programáticas antes de hacer una solicitud AJAX o de permitir que el usuario avance en un asistente.

input.reportValidity() se comporta como checkValidity, pero además activa la información emergente integrada del navegador y enfoca el primer campo no válido. Utilícelo cuando quiera obtener la interfaz nativa sin esfuerzo; use checkValidity cuando quiera controlar completamente la presentación de los errores.

Es posible que los mensajes predeterminados del navegador ("Complete este campo") no coincidan con su tono o idioma. Sobrescríbalos con input.setCustomValidity("Enter a valid coupon code"). El campo seguirá siendo no válido hasta que borre el mensaje con setCustomValidity("").

Añada novalidate al formulario para suprimir el comportamiento de validación predeterminado del navegador. Es útil al implementar una presentación de errores completamente personalizada; el formulario se enviará independientemente de que hubiera superado la validación, por lo que debe comprobarlo mediante código antes de enviarlo.

Cada control dispara un evento invalid cuando falla la validación. Escúchelo para suprimir la información emergente predeterminada y mostrar un mensaje personalizado: input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input); }).

El atributo pattern contiene una expresión regular de JavaScript con la que el valor debe coincidir por completo (no es necesario usar los anclajes ^ y $; se incluyen implícitamente). Combínelo con el atributo title para describir el formato esperado a los usuarios.

La validación de HTML es una comodidad para los usuarios; cualquiera puede omitirla editando el DOM. Vuelva a validar siempre en el servidor. Las restricciones de HTML existen para mejorar la experiencia de usuario (comentarios inmediatos y menos solicitudes), no para proporcionar seguridad.

Las restricciones se acumulan: <input type="number" min="18" max="120" required step="1"> debe estar presente, ser un entero y encontrarse entre 18 y 120. El navegador indica qué restricción específica falló mediante los indicadores de ValidityState, para que pueda mostrar el mensaje adecuado.

¿En qué se diferencia la pseudoclase CSS :user-invalid de :invalid?

Los atributos de validación nativa (required, type, pattern, min, max) y la API de ValidityState proporcionan una potente validación del lado del cliente sin JS de forma predeterminada. CSS :user-invalid aplica estilos a los errores después de la interacción. checkValidity/reportValidity permiten realizar comprobaciones programáticas. setCustomValidity reemplaza los mensajes predeterminados. Vuelva a validar siempre en el servidor.