Debes usar JavaScript si quieres controlar la apariencia de los mensajes de error nativos o tratar con navegadores heredados que no admiten la validación de formularios incorporados en HTML. En esta sección veremos las diferentes formas de hacer esto.
La API de validación de restricciones
La mayoría de los navegadores admiten la API de validación de restricciones (en-US)"), que consta de un conjunto de métodos y propiedades disponibles en las interfaces DOM de elementos de formulario siguientes:
- HTMLButtonElement (enUS)") (representa un elemento <button>)
- HTMLFieldSetElement (enUS)") (representa un elemento <fieldset>)
- HTMLInputElement (representa un elemento <input>)
- HTMLOutputElement (enUS)") (representa un elemento <output> (enUS)"))
- HTMLSelectElement (representa un elemento <select>)
- HTMLTextAreaElement (enUS)") (representa un elemento <textarea>)
La API de validación de restricciones hace que las propiedades siguientes estén disponibles en los elementos anteriores.
- validationMessage: Devuelve un mensaje localizado que describe las restricciones de validación que el control no satisface (si corresponde). Si el control no es candidato para la validación de restricciones (willValidate es false) o el valor del elemento satisface sus restricciones (es válido), esto devolverá una cadena vacía.
- validity: Devuelve un objeto ValidityState que contiene varias propiedades que describen el estado de validez del elemento. Puedes encontrar todos los detalles de todas las propiedades disponibles en la página de referencia ValidityState (enUS)"); a continuación se enumeran algunos de los más comunes:
- patternMismatch (enUS)"): Devuelve true si el valor no coincide con el pattern especificado, y false si coincide. Si es verdadero, el elemento coincide con la pseudoclase :invalid de CSS.
- tooLong (enUS)"): Devuelve true si el valor es mayor que la longitud máxima especificada por el atributo maxlength, o false si es menor o igual al máximo. Si es verdadero, el elemento coincide con la pseudoclase :invalid de CSS.
- tooShort (enUS)"): Devuelve true si el valor es menor que la longitud mínima especificada por el atributo minlength, o false si es mayor o igual al mínmo. Si es verdadero, el elemento coincide con la pseudoclase :invalid de CSS.
- rangeOverflow (enUS)"): Devuelve true si el valor es mayor que el máximo especificado por el atributo max, o false si es menor o igual que el máximo. Si es verdadero, el elemento coincide con las pseudoclases :invalid y :outofrange de CSS.
- rangeUnderflow (enUS)"): Devuelve true si el valor es menor que el mínimo especificado por el atributo min, o false si es mayor o igual que el mínimo. Si es verdadero, el elemento coincide con las pseudoclases :invalid y :outofrange de CSS.
- typeMismatch (enUS)"): Devuelve true si el valor no está en la sintaxis requerida (cuando type es email o url), o false si la sintaxis es correcta. Si es verdadero, el elemento coincide con la pseudoclase :invalid de CSS.
- valid: Devuelve true si el elemento cumple con todas sus restricciones de validación y por lo tanto se considera válido, o false si falla alguna restricción. Si es verdadero, el elemento coincide con la pseudoclase :valid de CSS; o con la pseudoclase :invalid de CSS de lo contrario.
- valueMissing: Devuelve true si el elemento tiene un atributo required pero no tiene valor, o false de lo contrario. Si es verdadero, el elemento coincide con la pseudoclase :invalid de CSS.
- willValidate: Devuelve true si el elemento se valida cuando se envía el formulario; false de lo contrario.
La API de validación de restricciones también pone a disposición los siguientes métodos en los elementos anteriores.
- checkValidity(): Devuelve true si el valor del elemento no tiene problemas de validez; false en caso contrario. Si el elemento no es válido, este método también activa un evento invalid en el elemento.
- setCustomValidity(message): Añade un mensaje de error personalizado al elemento; si configuras un mensaje de error personalizado, el elemento se considera no válido y se muestra el error especificado. Esto te permite utilizar el código JavaScript para establecer un fallo de validación distinto de los ofrecidos por las restricciones estándar de validación de HTML5. El mensaje se muestra al usuario cuando se informa del problema.