HTML5. Validar formularios sin Javascript. Parte II.
Francisco Oliveros / Publicado hace 1 año / 8 ComentariosLeer: HTML5. Validar formularios sin Javascript. Parte I.
Con HTML5 es posible validar campos de texto con expresiones regulares gracias al atributo pattern
, pero antes de llegar a ello podemos hacer uso de otra herramienta de HTML5, los nuevos tipos de campos. Existen varios de estos nuevos tipos de campos, pero para la validación de formularios son especialmente útiles: email, url
y number
.
¿Cómo funcionan los tipos de campos?
Los tipos de campos se utilizan como valores del atributo type
en elementos input
. Al indicar el tipo de campo, el navegador podrá validar la información introducida por el usuario y permitirá su envío o dará una advertencia si no esta bien completado.
Tipo URL
<form action="comments.php">
<label for="user-url">URL: </label><input type="url" name="user-url" id="user-url" />
<input type="submit" value="Enviar" />
</form>
Que en caso de llenarse de manera incorrecta, Google Chrome, actualmente muestra la siguiente advertencia:
Tipo Email:
<form action="comments.php">
<label for="user-email">Email: </label><input type="email" name="user-email" id="user-email" />
<input type="submit" value="Enviar" />
</form>
Y el correspondiente error:
Tipo número:
<form action="comments.php">
<label for="user-age">Edad: </label><input type="number" name="user-age" id="user-age" />
<input type="submit" value="Enviar" />
</form>
Ventajas de los tipos de campos.
- Compatibles en los navegadores modernos más usados.
- Amigables para móviles. Por ejemplo, si se usa el tipo de campo “email” algunos teléfonos motrarán un teclado más acorde, que incluye “@” y “.com”.
- Mensajes de error más concretos que con pattern.
- Es una validación nativa, por tanto rápida y fácil de implementar.
- Semánticamente más correctos.
Desventajas de los tipos de datos para validación.
- Depende del navegador, por tanto, su compartimiento y varía en cada uno.
- No 100% soportados.
Conclusión.
Su soporte en los navegadores modernos más usados y su fácil implementación hace a los nuevos tipos de campos ideales para validaciones poco estrictas y donde ya hay una validación de lado del servidor. Seguramente en el futuro cercano podrán usarse con un mayor grado de confiabilidad que nos harán olvidarnos de las soluciones Javascript, dejando para Javascript solo las validaciones más complejas y/o específicas.
MIL MILLONES DE GRACIAS !!
Ya me suscribi!!!
Gracias!!
Hola. Sólo tengo una duda. Estoy haciendo un formulario para una web y se valida correctamente, pero los mensajes tipo “Debes introducir un número ” no me aparecen como Pop-up, por llamarlo de alguna manera.
¿Eso es cosa del navegador mío o es que estoy haciendo algo mal?
Era justo lo que andaba buscando. Muchas Gracias!!! Encontré varias publicaciones interesantes en tu sitio. Felicitaciones!!!
Muchas Gracias. Tu sitio ya está en mis favoritos!!! Muy buenos post
De lo mejor Gracias por tu interes en ayudar Felicitaciones
Gracias por el tutorial, así es más sencillo validar los formularios para usuarios. Para el diseño de páginas web me va a venir muy bien.