Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


Atributo pattern HTML5: Expresiones regulares para la validación de inputs

Con el atributo pattern HTML5  podremos delimitar mediante expresiones regulares el contenido insertado por el usuario en los inputs de los formularios.

Sintaxis del atributo pattern HTML5

Vamos a ver la sintaxis de este atributo HTML5 extraída de su web oficial:

Tal y como podéis ver en el código superior es muy sencillo añadir el atributo, en la sintaxis he puesto que al menos se escriban 4 caracteres y como máximo 16.

Ejemplo del atributo pattern HTML5

Vamos con un ejemplo práctico para ver en funcionamiento la validación por expresión regular:

Tal y como pongo en el código comentado, solo dejará enviar el formulario cuando se cumpla lo siguiente:

  • Que la palabra contenga entre 4 y 6 caracteres.
  • Y que los caracteres sean de la ‘A’ a la ‘Z’ siendo mayúsculas o minúsculas.

De no cumplirse la expresión regular sale un mensaje similar a este:

mensaje atributo patternPodéis ver otros ejemplos prácticos en los post de email input HTML5 y tel input HTML5.

Compatibilidad del atributo pattern HTML5

Este atributo es compatible con los siguientes input:

Listado de los nuevos atributos HTML5

En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.

Listado de los nuevos input HTML5

En esta url tenéis el listado completo de los nuevos input de HTML5.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies

Centro de preferencias de privacidad

Cookies imprescindibles

para medir la audiencia

ga,gdpr