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

Validar un formulario con HTML5

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

Datalist: Autocompletar en HTML5 sin Ajax y sus ventajas

Estamos a sábado, hoy no quiero hablar de algo muy espeso ni complicadito ya que como es de entender, los fines de semana la maquinaría se relaja. Este es otro de esos post de relleno que lejos de aportar paja, intenta enseñar algo, por muy poquito que sea, pero que os da las claves para que a partir de esto se puedan desarrollar cosas mas complejas.

En este artículo quiero hablar de una de las nuevas características que nos ofrece HTML5. Y no es otra que de las datalist, que pueden ser fácilmente utilizadas en cuadros de texto para arrojar resultados a medida que vamos escribiendo.

Chuleta con lo nuevo en html5
Chuleta con lo nuevo en html5

Tengo que reconocer que esta funcionalidad es una de esas a las que le tengo manía y no porque no sea útil sino porque cuando he tenido que implementarla en algún proyecto me ha dado mucha pereza programarla y mira que es una tonteria peeeeero…

Vale que existen plugins para jQuery que te permiten hacerlo de una manera muy cómoda, pero la manera tradicional de hacer esto era con eventos de teclado, llamadas ajax y consultas a la base de datos.
Así pues, el programador tenía que capturar el evento keyup del teclado y sacar el valor de la caja de texto para así enviarlo por ajax a un php que con la cadena de texto obtenida hiciera una consulta a la base de datos para ver si nos devolvía algún resultado y con suerte devolver un json con los datos serializados para montar la vista.

Dependiendo de que es lo que queremos hacer con los datos devueltos tendríamos que añadir mas o menos complejidad al asunto, pero la idea básica es la siguiente.

<!DOCTYPE html>
<html>
	<head>
		<title>Ejemplo buscador de animales</title>
		<script src="jquery-2.1.1.min.js"></script>
	</head>
	<body>
		Buscar un animal: <input type="text" id="caja"/>
	</body>
</html>
<script type="text/javascript">
	$(document).ready(function(){
		var consulta = null;
		$("#caja").on("keyup",function(){
			$.ajax({
                type: 'post',
                cache: "true",
                dataType: 'html',
                beforeSend: function(){
                    consulta = $('#caja').val();
                },
                data: JSON.stringify(consulta),
                url: "resultados.php",
                success: function(data){
                    /* TODO */
                }
            })
		});
	});
</script>

Como veis, esto produce una cantidad innecesaria de llamadas a la base datos. Con los datalist de html5 podemos optimizar el rendimiento mejorando la experiencia del usuario.
Estos datalist nos permiten definir el contenido de los cuadros de texto tal y como lo haríamos con los select mediante los elementos de tipo option.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-2.1.1.min.js"></script>
</head>
	<body>
	Buscar un animal: <input type="text" list="animales" id="caja"/>
	<datalist id="animales">
	    <option label="Carnivoro" value="Perro" data-id="1"/>
	    <option label="Herbivoro" value="Caballo" data-id="2"/>
	    <option label="Carnivoro" value="Oso" data-id="3"/>
	    <option label="Carnivoro" value="Mapache" data-id="4"/>
	    <option label="Herbivoro" value="Reno" data-id="5"/>
	</datalist>
	</body>
</html>

La idea básica de esto sería hacer que el servidor nos devolviera el contenido de este input en json y montarlo todo en la vista.

Soporte en navegadores

Este control podemos utilizarlo de una manera fiable en casi todos los navegadores excepto en Safari. En concreto, esta soportado por los siguientes navegadores:

Compatibilidad datalist
Compatibilidad datalist

De todas maneras hay una opción para los navegadores que no soportan los datalist y es mediante el control select. La opción habitual es sustituirlo para que los usuarios puedan elegir simplemente desde una lista. Para ello bastaría con anidarlo dentro con las opciones completas, su value y el texto a mostrar.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-2.1.1.min.js"></script>
</head>
	<body>
	Buscar un animal: <input type="text" list="animales" id="caja"/>
	<select id="animales">
	    <option value="Perro" data-id="1">Perro</option>
            <option value="Caballo" data-id="2">Caballo</option>
            <option value="Oso" data-id="3">Oso</option>
            <option value="Mapache" data-id="4">Mapache</option>
            <option value="Reno" data-id="5">Reno</option>
	</select>
	</body>
</html>

El problema de esta solución es que se mostrarán los dos controles, el cuadro de texto y la lista desplegable, cosa que queda bastante fea de cara al usuario y puede hacer incluso que se malinterpreten los datos.

Los dos controles bien juntitos
Los dos controles bien juntitos

De todas maneras, no nos vamos a librar en cualquier caso de tener que validar los datos recibidos en el servidor ya que los datalist no aportan nada a la seguridad, tan solo es una ayuda visual que mejora la usabilidad y experiencia de la web, tened eso siempre presente.

Y con esto termina el artículo sobre el datalist, elemento que ayuda mucho pero que por desgracia no podemos estirar mas en la explicación de su uso ya que donde no hay mata…

 

¡Hasta que volvamos a olernos!