Validación en lado cliente con HTML5

15
38223

En este tutorial aprenderemos a utilizar HTML5 para validar formularios en lado cliente, sin tener que utilizar javascript ni tener que escribir ninguna linea de código.

0. Índice de contenidos.

1. Introducción

Gracias a HTML5 es posible validar nuestros formularios en lado servidor sin necesidad de utilizar javascript, solamente utilizando para ello atributos que iremos añadiendo a los campos que queramos validar.

2. Entorno

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 17′ (2.8 GHz Intel Core 2 Duo, 8GB 1067 MHz DDR3, 256GB Solid State Drive).
  • NVIDIA GeForce 9400M 256 MB
  • Sistema Operativo: Mac OS X Yosemite Version 10.10.2
  • Google Chrome Versión 43.0.2357.124 m

3. Validación de texto

Para hacer nuestro input de tipo texto obligatorio utilizaremos el atributo «required»

Para mostrar una sugerencia en nuestro input de tipo texto utilizaremos el atributo «placeholder»

Para validar que nuestro input de tipo texto utilizaremos corresponda con un formato dado utilizaremos el atributo «pattern» acompañado de una expresión regular

Para validar que nuestro input de tipo texto utilizaremos corresponda con una longitud dada utilizaremos el atributo «maxlength»

4. Validación de ficheros

Para hacer nuestro input de tipo archivo obligatorio utilizaremos el atributo «required»

Para hacer que nuestro input de tipo archivo solo acepte una extensión determinada utilizaremos el atributo «accept»

Para hacer que nuestro input de tipo archivo acepte las extensiones de un tipo de archivo utilizamos «.extensión»

Para hacer que nuestro input de tipo archivo acepte más de una extensión separamos los valores con comas

Para hacer que nuestro input de tipo archivo acepte todas las extensiones de un tipo de archivo utilizamos asterisco

5. Código de ejemplo

6. Conclusiones

En resumen:

Con la ayuda de HTML5 ya es posible reducir al mínimo la complejidad de nuestras validaciones de formularios sin necesidad de escribir nada de código.

7. Referencias

15 Comentarios

  1. hola,
    se encuentra bien este codigo?
    BARCODE:

    ya que no funciona el pattern, pero si funciona el maxlength.

    estoy trabajando en jsp.
    saludos.

    • Revisa si el elemento tiene como el atributo con el que tienes problemas. Ya que dependiendo de la definición de cada elemento, un atributo puede o no estar disponible.

Dejar respuesta

Please enter your comment!
Please enter your name here