English Português

html5

Leer: 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:

html5-tipo-de-campo-url

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:

html5-tipo-de-campo-email

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>

html5-tipo-de-campo-number

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.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Maris / Hace 3 años /

      MIL MILLONES DE GRACIAS !!

      Responder a Maris →
    2. Mariska / Hace 3 años /

      Ya me suscribi!!!

      Responder a Mariska →
    3. Juan Duitama / Hace 3 años /

      Gracias!!

      Responder a Juan Duitama →
    4. Juanma / Hace 3 años /

      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?

      Responder a Juanma →
    5. Daseseal / Hace 3 años /

      Era justo lo que andaba buscando. Muchas Gracias!!! Encontré varias publicaciones interesantes en tu sitio. Felicitaciones!!!

      Responder a Daseseal →
    6. Denti / Hace 3 años /

      Muchas Gracias. Tu sitio ya está en mis favoritos!!! Muy buenos post

      Responder a Denti →
    7. Fernando Paez / Hace 2 años /

      De lo mejor Gracias por tu interes en ayudar Felicitaciones

      Responder a Fernando Paez →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad