Validación básica de formularios con HTML5

Hoy en día tenemos muy fácil el tema de la validación de los diferentes campos que componen nuestro formulario, tenemos diferentes formas de hacerlo, podemos utilizar JavaScript, jQuery podemos hacer las validaciones del lado del servidor con PHP o simplemente utilizar HTML5 para hacer estas validaciones.

Utilizar HTML5 para hacer los formulario de contacto es una buena idea, pero utilizar estas validaciones que vienen por defecto con HTML5 de pronto no seria conveniente ya que solo los navegadores modernos la soportan, incluso hay casos como el atributo “required” que no es soportado por los dispositivos móviles. Sin embargo en este tutorial veremos como usarlos y que ventajas o desventajas podremos tener al usar este tipo de validaciones de formulario.

Validar con los Input Types de HTML5

Los input Types o tipos de entrada son la forma mas básica, fácil y cómoda de hacer nuestras validaciones a los diferentes campos del formulario, solamente definimos el tipo de texto que se espera recibir de ese campo, el navegador hace esta validación por nosotros. Ejemplo:

Simplemente definimos el tipo de dato que esperamos recibir de ese campo y listo, el navegador se encarga de el resto.

validaciones-html-input-types-01

Los navegadores modernos verifican que los datos introducidos sean y concuerden con el que hemos definidos y esperamos recibir, de no ser así esta mostrara un mensaje informando que debe de corregir su entrada en ese campo.

Ahora, el uso de este tipo de validación tiene algunas ventajas sorprendentes en cuantos a su uso en los dispositivos móviles ya que estos automáticamente reconocen el tipo de campo de entrada  y nos ofrece una ayuda adicional. Así que esta opción es muy útil si nos enfocamos en dispositivos móviles.

types-input-phones

HTML5 maneja varios tipos de entrada para formularios, entre ellos tenemos:

  • type=”color”
  • type=”date”
  • type=”datetime”
  • type=”datetime-local”
  • type=”email”
  • type=”month”
  • type=”number”
  • type=”range”
  • type=”search”
  • type=”tel”
  • type=”time”
  • type=”url”
  • type=”week”

Para una mejor referencia te remito a: http://www.w3schools.com/html/html5_form_input_types.asp donde tendras esta informacion mucho mas ampliada.

Aunque este sistema es algo muy bueno para implementar, utilizar este tipo de validación no es muy seguro y confiable ya que el soporte de los diferentes navegadores es un poco limitado, especialmente para los antiguos. Veamos un poco la siguiente grafica y comprenderemos un poco mas.

soporte-navegadores-input-types-html5

Validar con el atributo “required”

El atributo required es una opción útil en cuanto el tema de la validación de campos de un formulario web, este evitara que el formulario sea enviado si uno de los campos que posea este atributo se encuentra vacío.

Simplemente agregando required en nuestro campo ya este se hace obligatorio para el usuario y debe de introduccir un valor en el.

Captura de pantalla 2013-11-17 a la(s) 13.46.55

Al usar este atributo de campo para que el campo sea obligatorio y no se envíe vacío, es una buena practica avisar al usuario que dicho campo es obligatorio ya sea con (*) u otra forma.

Aunque esta opción de validación es mas viable y segura que la anterior ya que evita los campos vacíos, no se debe confiar totalmente en este tipo de validación ya que todos los navegadores no la soportan. Vamos a dar un vistazo a caniuse.com y para estar mas seguro de este punto.

atributo-required-caniuse-html5

Fuente: http://caniuse.com/#search=required

Como vemos en el grafico que nos provee Caniuse, este atributo solo es soportado por navegadores modernos, y no todos, y en la parte de dispositivos móviles no pasa la prueba, no tiene soporte. Así que utilizar este atributo tampoco suele ser seguro para garantizar el éxito de nuestros formularios.

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

1 Respuesta

  1. Arturo dice:

    Hola.
    He estado viendo Formulario de contacto Creativo – Enviar datos al correo con PHP que me ha gustado mucho, he modificado los dos archivos que dicen pero ahora qué tengo que hacer para unirlos y que me funcione?
    Gracias