La validación de formularios del lado del cliente ha sido un problema que siempre se ha solucionado con la utilización de Javascript, ya sea con código propio o de terceros. Esto es debido a que en el pasado era impensable tener una solución conHTML puro, pero con la llegada del conjunto de especificaciones y tecnologías que componen el actual HTML5, ahora esto es posible.
El atributo «required»
Al incluir el atributo required dentro de un elemento <input>, automáticamente se hace obligatorio su llenado y al ser un atributo tipo booleano, solo se requiere su presencia sin más.
1
| <input type="text" name="nombre" required/> |
En el momento en que se encuentra un error de validación se ejecuta la acción por defecto del navegador, normalmente aparece un pequeño globo emergente (tooltip) conteniendo un texto de advertencia. Añadiendo el atributo title en la etiqueta <input>, se puede extender la información mostrada.
1
| <input title="Se necesita un nombre" type="text" name="nombre" required/> |
El atributo «pattern» y los tipos de <input>
Con se menciono anteriormente, con required solo se necesita de cualquier valor en el elemento <input> para ser válido, pero utilizando el atributo pattern en conjunto, se logra que se verifique no solo la presencia de un valor, sino que este valor debe contener un formato, una longitud o un tipo de dato especifico. Esto último se logra definiendo un patrón con expresiones regulares.
1
| <input type="text" pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" name="email" required/> |
Con el patrón anterior se valida un formato correcto de correo electrónico (mail@example.com), pero en la práctica esto resulta un tanto absurdo, ya que definiendo un tipo email en la etiqueta <input>, el navegador por si mismo hace la validación del tipo en cuestión.
1
| <input type="email" name="email" required/> |
Es lo mismo con el resto de los tipos de <input>: search, url, tel, email, password, date pickers, number, checkbox, radio y file. Por lo tanto el potencial del atributo pattern recae en ser más específicos en el tipo de formato y longitud que se requiere. Por ejemplo, supongamos que se necesita que el usuario ingrese una dirección valida de IPV4, lo hacemos de la siguiente manera:
1
| <input title="0.0.0.0" type="text" name="ipv4"/> |
Cuatro bloques de uno a tres dígitos es la notación punto-decimal de una dirección valida de IPV4.
La pseudo clase: invalid de CSS3
Básicamente la pseudo clase: invalid representa cualquier campo invalido que sea resultado de una validación (valga la redundancia), lo opuesto ocurre con su contraparte: valid. Esto facilita que si un campo contiene un valor inválido pueda adoptar una apariencia acorde, de esta forma ayudando al usuario a identificar los campos que necesitan ser verificados.
1
2
3
4
5
6
7
8
9
10
11
12
13
| input:invalid {border: 1px solid red;}/* Estilo por defecto */input:valid {border: 1px solid green;} |
Un aspecto que es importante resaltar, es que por defecto todos los campos son validos – como es de esperarse –, pero si un campo es requerido, entonces ocurre lo contrario, este por defecto será inválido.
1
2
3
4
5
6
7
8
9
10
11
12
13
| /* Estilo por defecto */input:required:invalid {border: 1px solid red;}input:required:valid {border: 1px solid green;} |
Conclusión
Esta es una más de las grandes bondades que trae consigo HTML5, sin embargo la validación de formularios de manera nativa aun se encuentra en una etapa temprana de desarrollo, especialmente con lo que respecta a la manera de notificar la existencia de un campo invalido, ya que no existen etiquetas CSS para personalizar el estilo del tooltip, al menos en caso de Google Chrome.
No hay comentarios:
Publicar un comentario