Validar formularios de forma nativa con HTML5

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 siquiera impensable el 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, aunque con la clara desventaja de que todavía no es soportado por la mayoría de los navegadores y quienes los soportan tienen su forma particular de ejecutarse, sin embargo es importante tenerlo presente, ya que en el futuro próximo será de una utilidad invaluable.

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.

Código :

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

Código :

<input type="text" name="nombre" title="Se necesita un nombre" required>

El atributo «pattern» y los tipos de <input>

Como se mencionó anteriormente, con required sólo 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.

Código :

<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 valido de correo electrónico ([email protected]), pero en la práctica esto resulta un tanto absurdo, ya que definiendo un tipo email en la etiqueta <input>, el navegador por sí mismo hace la validación del tipo en cuestión.

Código :

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

Código :

<input type="text" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" title="0.0.0.0" name="ipv4">

Cuatro bloques de uno a tres dígitos divididos por puntos, es la notación punto-decimal de una dirección válida de IPV4.

La pseudo clase :invalid de CSS3

Básicamente la pseudo clase :invalid representa cualquier campo inválido 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.

Código :

  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 válidos – como es de esperarse –, pero si un campo es requerido, entonces ocurre lo contrario, este por defecto será invalidado.

Código :

  /* 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 no válido, ya que no existen etiquetas CSS para personalizar el estilo del tooltip, al menos en caso de Google Chrome.

Escrito por Jonathan Javier { Twitter: @jonasanx }

Referencias

• W3C: The required attribute
  
• W3C: The pattern attribute
  
• HTML5 <input> required Attribute
  Mozilla Developer Network: :invalid
  
• Expresión regular
  

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.