Es una nueva comunidad sobre el reciente estándar de la web Html5, donde puedes encontrar tutoriales, tips, consejos, información, noticias y demás en un solo lugar.

Validación de formularios nativos con HTML5


  Publicado hace |  Etiquetas: , , , , ,

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 con HTML puro, pero con la llegada del conjunto de especificaciones y tecnologías que componen el actual HTML5, ahora esto es posible.

Debemos tener en cuenta la clara desventaja de que todavía no es soportado por la mayoría de los navegadores y quienes lo soportan, ya que cada uno tienen su forma particular de ejecutarse, sin embargo es importante tenerlo presente, ya que en un futuro será de una utilidad invaluable.

Nota: Para los ejemplos expuestos en este articulo, se ha utilizado Google Chrome versión 18 por ser el navegador que mas funcionalidad de HTML5 ha implementado a la fecha.

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.

<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.

<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.

<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.

<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 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:

<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.

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.

/* 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.

Referencias

Artículo escrito por: @jonasanx

comments powered by Disqus