Validar formularios con HTML5 y CSS3

En este artículo explicamos como validar de forma sencilla formularios usando HTML5 y CSS3, de forma que ahorramos tiempo con la simplicidad de códigos que supone el nuevo HTML5.

Para muchos desarrolladores, la creación y validación de formularios son un par de las tareas más frustrantes y menos entretenidas al momento de realizar páginas web para nuestro dominio. Su proceso de marcado y de estilo pueden resultar monótonos y hasta tediosos, ya que consisten en repetir muchas líneas de código y reciclar operaciones,

Al momento de llevar acabo su validación, nos debemos asegurar de distintas maneras que no se pueda inyectar datos y no se puedan filtrar errores, por lo que generalmente verificamos los datos tanto del lado cliente y como del lado del servidor, teniendo que idear e implementar una larga serie de expresiones regulares que al final del día nos van a desesperar, pero que van a lograr la tarea de lograr un mejor formulario.

Como desarrollador, sabes que los formularios tienen que estar bien estructurados, que deben ser lo más seguro posibles y a la vez debes darles una muy buena presentación, el simple hecho de pensar en ello puede causar desánimo en varios, pero con HTML5 combinado con CSS3 podemos crear maravillas en pocos minutos.

Validar formularios con HTML5 y CSS3

Imagina que te encuentras en un Viernes a las 5 de la tarde, estás a punto de salir del trabajo y en el último momento llega una petición urgente para realizar un formulario para el sitio de ventas de la empresa. Necesitas validarlo muy bien porque de ello depende que los datos del cliente lleguen al servidor de manera correcta y además necesitas darle al formulario un estilo adecuado porque es la imagen de la empresa la que está en juego.

Por tu parte ya no quieres saber nada del trabajo, es Viernes, falta 1 hora para irte a disfrutar de tu fin de semana y lo que menos deseas hacer es crear y validar un formulario, pero debes entregar algo para que sea probado en QA. Es entonces que HTML5 entra al rescate y te ayuda a validar tus campos con una serie de atributos sencillos de aprender y aplicar, los cuales simplemente debes incrustar en el código del formulario.

Al momento de crear los elementos del formulario de la siguiente manera:

<input id ="nombre" name="nombre" type="text" />
<input id ="email" name="email" type="text" />
<input id ="telefono" name="telefono" type="text" />

Indicamos que los tres serán de tipo texto, se les asigna un id y un nombre respectivo para posteriores funciones de validación, las cuales cotidianamente llevábamos acabo en el lado cliente con Javascript.

Con esta declaración clásica tendríamos que validar que el texto introducido en el campo email realmente lleve la estructura deseada, con un nombre de usuario seguido de una “@” y finalmente el dominio, para ello podemos usar una expresión regular o simplemente podemos cambiar el atributo “type” del elemento “input” con HTML5, declarándolo como email de la siguiente manera:

<input id ="email" name="email" type="email" />

Ahora al momento de introducir un texto nos pedirá que sea con esa estructura, en caso de no ser así enviará una advertencia generada y dependiente del propio navegador. Hay que recordar que hasta el momento HTML5 sólo es interpretado por los navegadores estandarizados como Chrome, Safari, Opera y Firefox.

El atributo “type” puede tener otro valores como “url” (dirección de internet), “tel” (teléfono) o “password” (contraseña) que ayudarán a hacer una validación más sencilla, además de agregar especificación al formulario y permitir que se pueda aplicar estilos por tipo a los distintos campos.

Podemos agregar atributos adicionales como “placeholder” que colocará un texto como ejemplo dentro del campo, el cual desaparecerá al momento de dar clic sobre él. El atributo “required” agrega la propiedad de obligatorio a un campo, por lo que si no se introduce un valor en él, el formulario no se enviará.

<input id ="email" name="email" type="email" placeholder="ejemplo@dominio.com" required />

El atributo “autofocus” se emplea para designar el campo seleccionado por defecto al momento de cargar la página, esto elimina la necesidad de recurrir a scripts para lograr esta función. Ahora se puede representar de la siguiente manera:

<input id ="nombre" name="nombre" type="text" required autofocus/>

Lo que anteriormente se hacía así:

 <input id ="nombre" name="nombre" type="text" />
<script>document.getElementById('nombre').focus();</script>

Con esto podemos construir un formulario rápido y sencillo en nuestro hosting. Siguiendo los estándares y recomendaciones queda estructurado de la siguiente manera:

 <form id="pago">
<fieldset>
<legend>Datos personales</legend>
<ol>
<li>
<label for="nombre">Nombre</label>
<input id="nombre" name="nombre" type=text placeholder="Escribe tu nombre completo" required autofocus>
</li>
<li>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="ejemplo@dominio.com" required>
</li>
<li>
<label for="telefono">Teléfono</label>
<input id="telefono" name="telefono" type="tel" placeholder="Ej. +4466212112154" required>
</li>
<li>
<label for="pais">País</label>
<input id="pais" name="pais" type="text" required>
</li>
</ol>
</fieldset>
<fieldset>
<legend>Datos de tarjeta de crédito</legend>
<ol>
<li>
<label for="numtarjeta">Número</label>
<input id="numtarjeta" name="numtarjeta" type="number" placeholder="Ej. 555-444-333-222" required>
</li>
<li>
<label for="nomtarjeta">Nombre</label>
<input id="nomtarjeta" name="nomtarjeta" type="text" placeholder="Nombre exacto del propietario" required>
</li>
</ol>
</fieldset>
-------------------------------------------------
<fieldset>
<button type="submit">Realizar compra</button>
</fieldset>
</form>

Y para concluir agregamos estilo a nuestro formulario, primero nos enfocamos en la parte general, le damos un fondo de color “SteelBlue”, modificamos su tamaño de letra a 12 píxeles, agregamos un borde de color “LightSteelBlue” y le damos un toque extra con las puntas del borde redondeadas.

 form#pago {
margin:auto;
background: SteelBlue;
color: white;
font-size: 12px;
padding: 30px;
width: 350px;
border:solid 10px LightSteelBlue;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

Quitamos las lineas de los fieldset para que no contrasten con el diseño.

 form#pago fieldset {
border: none;
} 

Le agregamos color al borde de los campos, redondeamos su borde y los alineamos a la derecha dándoles un tamaño de 200 píxeles, lo que los alinea sin la necesidad de recurrir a tablas.

 form#pago input{
font-size:12px;
background: white;
border:solid 1px LightSteelBlue;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
float: right;
margin-right: 15px;
width: 200px;
}

Finalmente arreglamos los elementos de la lista para que no se muestren los números y agregar un poco de espacio entre líneas.

 form#pago ol li {
line-height: 25px;
list-style: none;
}

Y si queremos agregar un estilo o color particular para que los campos obligatorios sean distinguidos, podemos recurrir a alguna de los siguientes códigos:

 form#pago [required]{
border:solid 1px red;
}

input:required {
outline: 1px solid red;
}

Con esto obtenemos un formulario bastante decente para nuestra web o blog, que se puede construir en menos de 10 minutos, dejándonos respirar y permitiéndonos salir a tiempo del trabajo para disfrutar nuestro fin de semana.

>>> Podemos ver aquí el ejemplo en funcionamiento <<<

Vale aclarar que esto es sólo aplicable para la validación del lado cliente, hay que recordar que siempre debemos realizar una validación del lado del servidor, aunque en muchas ocasiones solo sea por precaución, debemos asegurar la veracidad de los datos.

HTML5 nos ofrece esta nueva alternativa para realizar un filtrado a un nivel aún más bajo, si deseas combinarlo con Javascript y algún framework esta más que permitido, la seguridad nunca sobrará para un sitio.