Si, así como lo leíste, con el atributo pattern (en español: patrón) de un input, podemos especificar una expresión regular (regex) para el valor del campo contra la que verificar. Por lo tanto este atributo nos permite implementar validaciones para cosas tan variadas como fechas, emails, códigos de productos o lo que se nos ocurra. Y es tan simple como suena: incluir una expresión regular en un atributo de HTML5:
1
2 3 4 5 6 7 |
<form onsubmit="alert('Fecha ingresada.');return false;">
<input type="text" required="" pattern="(0[1-9]|1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4}" name="pattern_fecha" id="pattern_fecha" placeholder="Ingrese una fecha" /> <input type="submit" value="Ingresar" /> </form> |
Si estás familiarizado con las expresiones regulares, sabrás que este patrón: [0-9]{4}-(0[1-9]|1[012])-(0[1-9]|1[0-9]|2[0-9]|3[01]) acepta solo fechas en el siguiente formato: DD.MM.AAAA.
Chrome, Firefox, Opera 9.5+, Safari 5+, Internet Explorer 10 son los únicos navegadores que soportan el atributo pattern por el momento.
Al probar esto en los distintos navegadores podrás ver que al ingresar un valor que no cumple con la expresión regular que está en el atributo pattern, el navegador nos mostrará un mensaje (nativo del navegador) diciendo que el campo es inválido y no disparará el evento submit del formulario hasta que el campo sea corregido. Todo esto sin una sola línea de javascript
No hay comentarios:
Publicar un comentario