Patrones en formularios con HTML5 pattern

03/Mar/2013 HTML5 , , 3 Comentarios

Para realizar la validación de un formulario de lado del cliente siempre recurriamos a scripts en JavaScript o usar alguna librería para verificar que los inputs sean los correctos, que estén completos con datos antes de que el formulario sea enviado. En HTML5 tenemos la posibilidad de aplicar patrones con HTML5 pattern.

En el nuevo estándar de HTML5, nuevos atributos de los input como required y pattern usados en combinación con CSS selectors nos facilita la tarea y mejora la interfaz de aviso al usuario.

Atributo HTML5 pattern

El atributo HTML5 pattern especifica una expresión regular usada para validar los valores del elemento input.

Este atributo funciona con los tipos de entrada input siguientes: texto, búsqueda, url, teléfono, correo electrónico y contraseña.

Usar el atributo de "tittle" para describir el HTML5 pattern para ayudar al usuario.

Ejemplo de uso de HTML5 pattern

Digamos que necesitamos que el input tenga el siguiente formato: Las primeras 3 letras del nombre de tu país. El uso de required y pattern nos asegura que el input debe ser completado y siguiendo la expresión regular. Al pararse el usuario sobre el input, el mensaje en el atributo title es mostrado, lo cual ayuda  a darle una pista al usuario de cómo debe llenar el formulario.

  1. <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="3 primeras letras de tu pais" />

Puedes encontrar una gran cantidad de patrones en la web HTML5 Pattern.

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

3 comentarios en “Patrones en formularios con HTML5 pattern”

Dave Rndn

Mayerly

amigos como hago para que la primera letra sea en mayuscula y el resto en minuscula

Dave Rndn

adan

es un rollo conseguir las reglas para definir esta linea nose que carajos significan los metadatos o caracteres que utilizan para definir las lineas

Dave Rndn

Andrés

Aunque no es muy recomendable realizar validaciones empleando este atributo debido al soporte de los navegadore; algunos ejemplos más el el siguiente enlace: http://www.desarrollolibre.net/blog/tema/12/html/el-atributo-pattern-en-html5

Los comentarios están cerrados.