Validación de Formularios con checkValidity: API de Validación HTML5

Validar un Formulario Completo

Cuando llamas a checkValidity() en un formulario, este valida todos sus elementos automáticamente. Este es el enfoque más común para validar formularios antes de enviarlos. Si algún campo es inválido, checkValidity() devuelve false y muestra los mensajes de error correspondientes en cada campo inválido.

Este código muestra cómo validar un formulario completo antes de enviarlo. El event listener para el evento submit previene el envío por defecto, llama a checkValidity(), y solo permite el envío si todos los campos son válidos. Si hay errores, checkValidity() muestra automáticamente los mensajes de error en los campos correspondientes.

Validar un Elemento Individual

También puedes llamar a checkValidity() en un elemento individual para validar solo ese campo. Esto es útil para validación en tiempo real, donde quieres mostrar feedback al usuario mientras escribe, en lugar de esperar hasta que envíe el formulario. La validación individual proporciona una experiencia de usuario más interactiva.

Este ejemplo muestra cómo validar un campo individualmente en tiempo real. El event listener para el evento input valida el campo cada vez que el usuario escribe algo. Esto proporciona feedback inmediato y ayuda al usuario a corregir errores antes de intentar enviar el formulario.

Eventos de Validación

Los elementos de formulario disparan eventos específicos cuando cambia su estado de validación. El evento invalid se dispara cuando un campo se vuelve inválido, y el evento validitychange se dispara cuando cambia la propiedad validity. Estos eventos te permiten reaccionar a cambios en el estado de validación de manera programática.

Este código muestra cómo escuchar eventos de validación. El evento invalid se dispara cuando un campo se vuelve inválido, lo que te permite mostrar mensajes de error personalizados o cambiar el estilo del campo. El evento validitychange se dispara cuando cambia la propiedad validity, lo que te permite actualizar la UI en respuesta a cambios en el estado de validación.

Propiedades del Objeto validity

El objeto validity tiene 11 propiedades booleanas que indican diferentes tipos de errores de validación. La propiedad valid es true si todas las demás propiedades son false, lo que significa que el campo es válido. Las otras propiedades se activan cuando se viola una restricción específica de validación.

• <strong>valueMissing:</strong> El campo está vacío cuando es required
• <strong>typeMismatch:</strong> El valor no coincide con el tipo esperado (email, url, etc.)
• <strong>patternMismatch:</strong> El valor no coincide con el atributo pattern
• <strong>tooShort/tooLong:</strong> El valor es más corto/largo que minlength/maxlength
• <strong>rangeUnderflow/rangeOverflow:</strong> El valor está fuera del rango min/max
• <strong>customError:</strong> Se estableció un error personalizado con setCustomValidity()

Este código muestra cómo acceder a las propiedades del objeto validity. Cada propiedad representa un tipo específico de error de validación. Por ejemplo, valueMissing es true cuando el campo está vacío pero tiene el atributo required. Puedes usar estas propiedades para mostrar mensajes de error específicos para cada tipo de error. Es importante notar que validity.valid es equivalente a llamar a checkValidity(), pero sin mostrar mensajes de error, lo que es útil cuando quieres verificar el estado sin afectar la UI.

Ejemplo Práctico: Mensajes de Error Específicos

Un caso de uso común es mostrar mensajes de error específicos según el tipo de error de validación. Por ejemplo, puedes mostrar un mensaje diferente si el campo está vacío (valueMissing) que si el formato del email es incorrecto (typeMismatch). Esto proporciona una experiencia de usuario más clara y ayuda al usuario a corregir errores más rápidamente.

Este ejemplo muestra cómo mostrar mensajes de error específicos según el tipo de error de validación. La función obtenerMensajeError verifica cada propiedad del objeto validity y devuelve un mensaje apropiado. Este patrón es útil cuando quieres proporcionar feedback más detallado que los mensajes de error genéricos del navegador.

Restricción required

El atributo required indica que un campo es obligatorio y debe tener un valor antes de enviar el formulario. Cuando un campo tiene required y está vacío, la propiedad valueMissing del objeto validity es true. Esta es la restricción más común y fundamental para cualquier formulario que capture datos esenciales.

Este código muestra cómo usar la restricción required. El atributo required en el HTML hace que el campo sea obligatorio. En JavaScript, puedes verificar si el campo está vacío usando la propiedad valueMissing del objeto validity. Este patrón es esencial para validar campos obligatorios.

Restricción pattern

El atributo pattern permite definir una expresión regular que el valor del campo debe cumplir. Esta restricción es útil para validar formatos específicos como números de teléfono, códigos postales, o identificadores personalizados. Cuando el valor del campo no coincide con el patrón, la propiedad patternMismatch del objeto validity es true.

Este ejemplo muestra cómo usar la restricción pattern para validar un código postal. El patrón es una expresión regular que define el formato válido del código postal. Cuando el valor del campo no coincide con el patrón, la propiedad patternMismatch es true. Este patrón es útil para validar formatos específicos que no están cubiertos por los tipos de input estándar. Algunos patrones comunes incluyen códigos postales, números de teléfono y contraseñas con requisitos mínimos. Siempre documenta tus patrones y proporciona ejemplos claros de formato válido para ayudar al usuario.

Restricciones min, max, minlength, maxlength

Las restricciones min y max definen el valor mínimo y máximo para campos numéricos, mientras que minlength y maxlength definen la longitud mínima y máxima para campos de texto. Estas restricciones son útiles para validar rangos de valores y limitar la cantidad de texto que el usuario puede ingresar.

Este ejemplo muestra cómo usar las restricciones min, max, minlength y maxlength. Para campos numéricos, min y max definen el rango de valores válidos. Para campos de texto, minlength y maxlength definen la longitud mínima y máxima. Estas restricciones se validan automáticamente por el navegador y proporcionan feedback visual al usuario.

Restricción type

El atributo type define el tipo de input y activa validación específica para ese tipo. Por ejemplo, type="email" valida que el valor sea un email válido, type="url" valida que sea una URL válida, y type="number" valida que sea un número. Cuando el valor no coincide con el tipo esperado, la propiedad typeMismatch del objeto validity es true.

Este ejemplo muestra cómo usar diferentes tipos de input para validar automáticamente el formato de los datos. type="email" valida emails, type="url" valida URLs, y type="number" valida números. Estos tipos proporcionan validación automática sin necesidad de código adicional, lo que simplifica enormemente el desarrollo de formularios. HTML5 también introdujo tipos como date, time, color, range y tel que no solo validan automáticamente, sino que proporcionan UI especializada en navegadores modernos (calendarios, sliders, etc.).

Método setCustomValidity()

El método setCustomValidity() te permite definir un mensaje de error personalizado para un elemento. Cuando pasas un string no vacío a setCustomValidity(), el elemento se marca como inválido y la propiedad customError del objeto validity es true. Para marcar el elemento como válido nuevamente, debes pasar un string vacío.

Este ejemplo muestra cómo usar setCustomValidity() para definir mensajes de error personalizados. La función validarContrasena verifica si la contraseña cumple con ciertos requisitos y llama a setCustomValidity() con un mensaje de error apropiado. Para marcar el campo como válido, pasamos un string vacío.

Método reportValidity()

El método reportValidity() es similar a checkValidity(), pero siempre muestra mensajes de error incluso si el elemento ya tenía mensajes de error personalizados. Esto es útil cuando quieres forzar la visualización de mensajes de error después de validar manualmente un formulario. reportValidity() devuelve true si todos los campos son válidos y false si alguno es inválido.

Este ejemplo muestra cómo usar reportValidity() para mostrar mensajes de error después de validar manualmente un formulario. La diferencia principal con checkValidity() es que reportValidity() siempre muestra mensajes de error, mientras que checkValidity() solo los muestra cuando hay cambios en el estado de validación. Usa reportValidity() cuando quieras forzar la visualización de errores después de validación personalizada.