reportValidity y setCustomValidity

La Constraint Validation API expone dos métodos que controlan la interfaz de validación integrada del navegador: reportValidity (mostrar la información emergente) y setCustomValidity (proporcionar un mensaje de error personalizado). Juntos permiten personalizar los mensajes y conservar la presentación nativa.

checkValidity() devuelve true/false de forma silenciosa, sin efectos secundarios en la interfaz. reportValidity() realiza la misma comprobación, pero además enfoca el primer campo no válido y muestra la información emergente de validación del navegador. Elija reportValidity cuando quiera obtener la experiencia de usuario nativa sin esfuerzo.

En los asistentes de varios pasos, valide los campos de cada paso antes de avanzar: if (step.reportValidity()) { next(); }. El navegador se encarga de mostrar el error y enfoca el campo que requiere atención, lo que evita que tenga que volver a implementar la gestión del foco.

Es posible que los mensajes predeterminados ("Complete este campo") no coincidan con su tono. input.setCustomValidity("Username is required") reemplaza el mensaje predeterminado por su texto. El campo se considera no válido hasta que borre el mensaje.

input.setCustomValidity("") elimina el mensaje personalizado y vuelve a activar la validación normal. Llámelo cada vez que vuelva a validar; de lo contrario, los mensajes personalizados obsoletos permanecerán aunque el usuario haya solucionado el problema.

Para comprobaciones del lado del servidor (disponibilidad de nombres de usuario, validez de cupones), use setCustomValidity después de recibir la respuesta asíncrona: const ok = await checkUsername(value); input.setCustomValidity(ok ? "" : "Already taken");. El navegador recoge inmediatamente el nuevo estado de validez.

Para utilizar su propia presentación de errores y conservar el seguimiento de la validez, escuche el evento invalid y llame a e.preventDefault() para suprimir la información emergente nativa: input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input, input.validationMessage); }).

setCustomValidity solo admite un mensaje personalizado a la vez. Para aplicar varias reglas, compruebe cada una y llame a setCustomValidity con el mensaje más relevante según un orden de prioridad. Se mostrará la primera regla que falle.

Si establece un mensaje personalizado para un campo required vacío, su mensaje puede entrar en conflicto con el mensaje predeterminado. Elija un solo enfoque para cada campo: desactive la restricción integrada (use type="text" en lugar de type="email" y valide mediante setCustomValidity) o confíe completamente en la validación integrada.

Para validar varios campos relacionados (por ejemplo, que coincidan las contraseñas), aplique setCustomValidity al campo relacionado: confirmInput.setCustomValidity(confirmInput.value === passInput.value ? "" : "Passwords do not match"). El formulario no será válido hasta que ambos valores coincidan.

El navegador localiza los mensajes integrados según el idioma del usuario. Los mensajes personalizados establecidos mediante setCustomValidity deben estar en el idioma correcto; lea navigator.language o su propio estado de i18n y proporcione la traducción correspondiente.

Abra DevTools y pruebe todas las rutas no válidas: envío vacío, entrada parcial, formato incorrecto y fallo asíncrono. Verifique que se muestre el mensaje correcto, que al solucionar el problema este desaparezca y que el envío de un formulario válido continúe. Los casos límite (pegar un formato no válido y el autocompletado del navegador) requieren pruebas específicas.

Después de llamar a input.setCustomValidity("Already taken"), ¿cómo indica al navegador que el campo vuelve a ser válido?

reportValidity activa la interfaz de validación integrada del navegador (foco e información emergente), por lo que resulta perfecta para las comprobaciones programáticas. setCustomValidity reemplaza los mensajes predeterminados por su texto; bórrelo con una cadena vacía cuando el campo vuelva a ser válido. Escuche el evento invalid y use preventDefault para mostrar errores completamente personalizados. Utilícelo para validaciones entre campos, comprobaciones asíncronas y mensajes personalizados localizados.