HTML5 Atributo pattern

html5-logo-pequeno  Aprendiendo HTML5     html5-logo-pequeno

Cuando creamos formularios web, especificamos diferentes campos para almacenar datos de diferente tipo, un ejemplo común son los famosos formularios en los cuales se espera que el usuario ingrese la información que corresponda a cada campo, pero muchas veces acudimos a scripts para validar la entrada de esos datos antes que el formulario sea enviado a una base de datos con la información correcta. La forma mas utilizada para validar ese tipo de cosas es utilizar Javascript gracias a sus eventos tales como el keypress, onlick, onblur, onchange etc.

Pues bien, esos scripts soy muy útiles, pero no del todo ¿porqué?, listo, básicamente porque si el usuario des habilita la función javascript del navegador, simplemente podrá ingresar cualquier valor en cada campo pues esta evadiendo la validación respectiva, lo cual conlleva a que se almacenen valores erróneos en la base de datos.

También podemos hacer uso de JQuery para validar los formularios, también existen scripts ya diseñados para tal fin, pero Html5 se solidariza con nosotros y nos hace la vida mucho mas fácil, mas fácil imposible diría yo jeje.

Html5 cuenta con un atributo robusto y poderoso llamado pattern, el cual reconoce y valida cualquier campo de acuerdo a patrones establecidos por el desarrollador, en este caso nosotros jajaja, bueno sin tanta cháchara veamos de que se trata:

1
2
3
<form><label>Numero de cédula</label>
<input name="ced" pattern="[0-9]+" required="" type="text" placeholder="Ej:1069873235" />
<input name="enviar" type="submit" value="enviar" /></form>

Ohhh fácil la validación cierto, pues bien  esta validación (solo permitirá ingresar números del 0 al 9) se ejecuta justo al momento de enviar el formulario, si la información escrita por el usuario concuerda con ese patrón, el formulario se envía sin problemas, de lo contrario le muestra donde hubo un error y debe corregir 🙂 … miremos.

el código anterior visto desde el navegador se visualiza de la siguiente manera:

input html5

El placeholder nos esta indicando que debemos insertar solo números, pues bien vamos a ingresar valores erróneos a propósito e intentemos enviar el formulario para ver que sucede.

pattern html5

Waooo el formulario no se envió, ya que el usuario ingreso un valor no valido (letra t).

Si este post fue de ayuda para ti, no olvides dejar un comentario, también puedes contar tu experiencia o lo que estés haciendo. Nos ayuda a seguir creciendo. ¡Vamos!, solo te llevará 1 minuto.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *