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
- 2. Entorno
- 3. Validación de texto
- 4. Validación de ficheros
- 5. Código de ejemplo
- 6. Conclusiones
- 7. Referencias
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.
Gracias, muy bueno.
Gracias muy buen tutorial.
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.
el ejemplo de esta web está incorrecto, no valida nada de nada, probado en CHROME
Si que funcionan los ejemplos, muchas gracias por la info. Saludos.
muito obrigado funcionou perfeitamente para me com firefox 52
Gracias por el tutorial esta muy claro y conciso
Muy buen tutorial. Gran trabajo David
Chakel Ferris
Grasias david, acá estoi haciendo la web de mi taller de autos y me ha servido de mucho su tutorial
Eres el mejor David!
Gracias, muy bueno
No me funciono…
Estoy utilizando:
ReactJS
semantic ui react
Todo perfecto y funcionando, me ha salvado la vida.
Muy buena información, gracias.