El HTML5 brinda sintaxis y elementos de API para posibilitar la validación de formularios del lado del cliente. Aunque esta funcionalidad no reemplaza la validación del lado del servidor, que todavía es necesaria por seguridad e integridad de la información, la validación del lado del cliente puede brindar una experiencia de usuario mejor al darle al usuario una respuesta inmediata acerca de la información ingresada.
Sintaxis de HTML para la validación restringida
Los siguientes elementos de sintaxis de HTML5 pueden ser usados para restringir datos en el formulario.
- El atributo required en los elementos <input>, <select> y <textarea> indica que se debe ingresar algún dato. (En el elemento <input>, required sólo se aplica con ciertos valores del atributo type.)
- El atributo pattern en el elemento <input> restringe el valor para que concuerde con una expresión regular específica.
- Los atributos min y max del elemento <input> restringen los valores máximos y mínimos que pueden ser ingresados.
- El atributo step del elemento <input> (cuando se usa en combinación con los atributos min y max) restringe la granularidad de los valores ingresados. Un valor que no se corresponda con un valor permitido no será validado.
- El atributo maxlength de los elementos <input> y <textarea> restringe el máximo número de caracteres (en puntos de código unicode) que el usuario puede ingresar.
- Los valores url y email para type restringen el valor para una URL o dirección de correo válida respectivamente.
Además, puedes prevenir la validación restringida especificando el atributo novalidate en el elemento <form>, o el atributo formnovalidate en el elemento <button> y en el elemento <input> (cuando type es submit o image). Estos atributos indican que el formulario no será validado cuando se envíe.
API de validación restringida
Las siguientes propiedades y métodos del DOM relacionadas con la validación restringida están disponibles para scripts del lado del cliente:
- En objetos HTMLFormElement, el método checkValidity(), que devuelve verdadero si todos los elementos asociados del formulario que necesitan validación satisfacen las restricciones y falso si no lo hacen.
- En elementos asociados al formulario:
- la propiedad willValidate, que es falso si el elemento no satisface las restricciones.
- la propiedad validity, que es un objeto ValidityState que representa los estados de validación en que está el elemento (p.e., condiciones de restricción que han fallado o exitosas).
- la propiedad validationMessage, que es un mensaje que contiene todas las fallas en las restricciones que pertenecen a ese elemento.
- el método checkValidity(), que devuelve falso si el elemento falla en satisfacer alguna de las restricciones o verdadero si pasa lo contrario.
- el método setCustomValidity(), que establece un mensaje de validación personalizado, permitiendo imponer y validad restricciones más allá de las que están predefinidas.