Validación de Campos tilizando HTML5

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.

Validar 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>
    <button type="submit">
        Enviar
    </button>
</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.

Validar campos 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 su contenido sea una dirección de correo válida. El campo debe ser definido de la siguiente manera.

<form method="post">
    <input type="email" required>
    <button type="submit">
        Enviar
    </button>
</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.

Validar campos 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>
    <button type="submit">
        Enviar
    </button>
</form>

En este ejemplo 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.

 

Validar campos que solo permitan números

Al igual que los ejemplos anteriores, para conseguir la validación nos valemos de un código muy sencillo.

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

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

 

Validar 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]*">
    <button type="submit">
        Enviar
    </button>
</form>

En este ejemplo 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 post. Si desean ver la compatibilidad de la validación de formularios con las diferentes versiones de navegadores pueden hacerlo accediendo al sitio web Can I use, el cual puedes encontrar en los enlaces en la parte inferior.