Validar un formulario con HTML5

¡Hola hamijos!

Estamos a Lunes y con pocas ganas de comenzar la semana, pero hay una buena Fnoticia relacionada con la programación web. El pasado día 28 de Octubre la W3C elevó todo el conjunto de tecnologías HTML5 a nivel de «recomendación». Esto es muy importante ya que aunque todavía no sea un estandard como tal, acaba de recibir un apoyo enorme de esta comunidad internacional y que gracias a este gran paso forzará a que los navegadores se vayan actualizando y comiencen a dar soporte completo a estas tecnologías. Esta acción va a ser la leche porque así nos podremos ir olvidando poco a poco de utilizar en nuestros css las etiquetas -moz y -webkit que muchas veces nos complican nuestros desarrollos.

Y para celebrar que HTML5 por fin es una recomendación oficial hoy traigo un artículo sencillito, de fácil digestión sobre las buenas prácticas que deberíamos estar utilizando a la hora de validar nuestros formularios.

Keep Calm and Write HTML5

Es mejor morir por paranoico que por descuidado y con esto me refiero a que, en mi modesta opinión, a la hora de validar un formulario deberíamos hacerlo tres veces. Una validación en HTML5, una validación en JavaScript y una última validación ya en el servidor, me da igual el lenguaje.

Para ilustrar lo que quiero enseñar hoy, he preparado un pequeño ejemplo del formulario que vamos a usar.

<form action="" method="post">
 <label for="nombre">Input con required </label>
 <input type="text" name="nombre" id="nombre" title="Debes escribir un nombre" required/>
 <br/>
 <label for="email">Input con pattern </label>
 <input type="text" name="email_cp" id="email_cp"
 title="Debes escribir un email válido"
 pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$"
 required/>
 <br/>
 <label for="email_sp">Input de tipo email </label>
 <input type="email" name="email_sp" id="email_sp" title="Debes escribir un email válido" required/>
 <br>
 <label for="textarea">Textarea con maxlength </label>
 <textarea name="textarea" id="textarea" maxlength="5"></textarea>
</form>

En el formulario podemos ver 4 campos que son 3 inputs y un textarea y cada uno de ellos lleva un atributo diferente.

[xyz-ips snippet=»FAQS-GORKAMU-TW-YELLOW»]

El atributo required

Cuando incluimos el atributo required en un input, le estamos indicando al navegador que este campo es obligatorio y que antes de enviar los datos ha de comprobar que no es nulo. Este atributo es de tipo booleano por lo que tan solo su presencia funcionará y no tendremos que declararle ningún valor.

<input type="text" name="nombre" id="nombre" title="Debes escribir un nombre" required/>

Si establecemos un titulo para el input tal y como se muestra en el ejemplo conseguiremos hacer aparezca un mensaje personalizado en el tootip de validación que genera el navegador. En la imagen que pongo debajo se puede ver, al menos en parte ya que la captura de pantalla pilla a media el desvanecimiento del tooltip…

Input con atributo required

El atributo pattern

Si, odio las expresiones regulares independientemente de su gran utilidad, que no la pongo en duda, pero no me gustan nada y en HTML5 no podían faltar. Si añadimos este atributo en un input podemos hacer que el texto que introduzcamos en el input case con la regexp que indiquemos. Esto viene muy bien cuando queremos validar que un campo de texto cumpla con un formato, una longitud o un tipo de dato específico.

 <input type="text" name="email_cp" id="email_cp"
 title="Debes escribir un email válido"
 pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$"
 required/>

Input con pattern

 

 El atributo type

Para ponernos más puristas, podemos utilizar el atributo type en nuestros inputs. Con esto, le estaremos indicando al navegador el tipo de dato que esperamos recibir. Hay muchísimos tipos diferentes y gracias a HTML5 se han añadido nuevos e interesantes tipos, pero lo más utilizados son los siguientes:

• type=»email»
• type=»datetime»
• type=»search»
• type=»url»
• type=»range»

Desde este enlace podéis consultar todos los tipos diferentes que existen.

 <input type="email" name="email_sp" id="email_sp" title="Debes escribir un email válido" required/>

Así pues, si utilizamos el tipo de dato email en un input no tendremos que estar tirando de expresiones regulares ni nada por el estilo. El navegador solito se encargará de validar por nosotros el tipo de datos. Todo un lujo hoygan!!

 

El atributo maxlength

¿Quieres poner un máximo de caracteres a escribir en un input? No hay problema, ya no tienes porque hacer funciones en jQuery que te devuelva el número de caracteres porque con el atributo maxlength podemos decirle al campo de texto que no supere la cifra de caracteres que especifiquemos.

<textarea name="textarea" id="textarea" maxlength="5"></textarea>

Por desgracia no todos los atributos son soportados por todos los navegadores, tal y como pasa con maxlength, pero esto irá cambiando poco a poco y más cuando se apruebe el estandard.

Soporte para MaxLength

Desde el enlace que os dejado mas atrás podéis consultar toda la documentación de los tipos de datos y atributos que se pueden poner en los campos de texto para validar un formulario. Además si a esto le añadimos la potencia de las pseudoclases de CSS3 podemos conseguir dotar de un aspecto único a nuestras validaciones. Para ellos se utilizan las pseudoclases :invalid y :required.

input:required:invalid,
textarea:required:invalid{
 background-color:red;
 border: 1px solid red;
}

input:required:valid,
textarea:required:valid{
 background-color:green;
 border: 1px solid green;
}

Junto a este, el validar un formulario con HTML5 son ejemplos muy majos de las cosas que podemos hacer con esta tecnología. Esperemos que por fin lo aprueben pronto como un estandard y lo implementen ya todos lo navegadores, mientras tanto he creado un jsFiddle con el ejemplo del post. ¡Espero que lo disfrutéis!

¡Hasta que volvamos a olernos!