.VALIDACION HTML5

Hace ya varios años que HTML5 llegó a la web y hay muchas características que están conocidas de sobra, como lo son la validación de campos de manera nativa con la API de HTML5. Pero de igual manera vamos a ver en este artículo como implementarla en nuestros formularios.

Hasta la llegada de HTML5 la única forma de validar los campos de nuestros formularios al vuelo, es decir, sin recargar toda la página, era con JavaScript, pero hoy en día HTML5 nos da una nueva forma de validarlos de una manera más fácil y rápida. Es importante hacer la acotación que en navegadores viejos no va a ser posible validar campos con HTML5 de forma nativa así que debemos ser precavidos a la hora de utilizarlo.

Con la API de HTML5 podemos hacer diferentes tipos de validaciones, en este caso vamos a ver los siguientes:

• Campos obligatorios.
• Campos de tipo Email.
• Campos de tipo URL.
• Campos que solo permitan números.
• Campos que solo permitan letras o determinado formato.
• Campos obligatorios

Este es el tipo de validación más sencilla que podemos hacer con la API de HTML5 ya que solo verifica si el campo posee algún valor. Vamos a ver el código necesario para conseguirlo:

<form method="post">
    <input type="text" required>
    <input type="submit" value="Enviar">
</form>

Como pueden observar lo importante en este código es el atributo required ya que sin él no se hará la validación. También es importante que los campos deben estar dentro de una etiqueta form para que la validación funcione al momento de enviar el formulario.

Campos de tipo Email

Esta validación funciona exactamente igual que la anterior con la diferencia que además de validar que el campo contenga datos, verifica que los mismos sean una dirección de correo válida. Es importante que definan el campo de la siguiente manera:

<form method="post">
    <input type="email" required>
    <input type="submit" value="Enviar">
</form>

En este código lo importante es colocar el tipo de campo como email para que sea validado correctamente.

Si solo deseamos que el contenido del campo sea una dirección de email válida, pero no que sea obligatorio debemos eliminar el atributo required.

Campos de tipo URL

Este tipo de validación es igual que la anterior así que veamos directamente el código:

<form method="post">
    <input type="url" required>
    <input type="submit" value="Enviar">
</form>

Al igual que la validación de campo de Email, en este caso debemos especificar el tipo como url para que la API verifique que el contenido del campo sea una URL válida.

Si sólo deseamos que el contenido del campo sea una URL válida, pero no que sea obligatorio debemos eliminar el atributo required.

Campos que solo permitan números

En este caso es también muy fácil hacer la validación, basta el siguiente código:

<form method="post">
    <input type="number" required>
    <input type="submit" value="Enviar">
</form>

Si sólo deseamos que el contenido del campo sea un número, pero no que sea obligatorio debemos eliminar el atributo required.

Campos que solo permitan letras o determinado formato

Este tipo de validación es un poco más complicada pero tiene un potencial mucho mayor que las anteriores debido a que podemos hacer validaciones que no están amparadas por defecto en la API de HTML5.

Para estos casos se utiliza el atributo pattern el cual recibe una expresión regular que la API tomará en cuenta para validar el contenido del formulario. Para ello observemos el siguiente código:

<form method="post">
    <input type="text" required pattern="[a-zA-Z]*">
    <input type="submit" value="Enviar">
</form>

En este caso se está indicando una expresión regular para que solo se permitan letras en repetidas ocasiones, es decir, que puede contener cadenas de texto gracias al asterisco (*). Si dicho símbolo no estuviera solo se permitiría un caracter en dicho campo.

Si sólo deseamos que el contenido del campo posea un determinado formato, pero no que sea obligatorio debemos eliminar el atributo required.

Con eso terminamos este artículo. Si desean ver la compatibilidad de la validación de formularios con las diferentes versiones de navegadores pueden hacerlo en este enlace.