Atributo pattern en HTML
El atributo pattern en HTML nos proporcionará una validación extra en los campos input de nuestro formulario.
Este atributo se vale de expresiones regulares para validar el valor del campo en el formulario. Puede resultarnos muy útil si queremos forzar al usuario a inserter datos correctamente forzados.
Texto de ayuda
Podremos configurar el texto que se mostrará en caso de que falle la validación. Este texto será el que especifiquemos en el atributo title del propio input.
Ejemplos
Código de idioma
<form action="">
<label for="codigo_idioma">Código de idioma:</label><br>
<small>Dos letras en mayúscula</small>
<input type="text"
id="codigo_idioma"
name="codigo_idioma"
pattern="[A-Z]{1,2}"
title="Dos letras en mayúscula" >
<br><br>
<input type="submit">
</form>
Vista previa
Dirección
<form action="">
<label for="direccion">Dirección:</label><br>
<small>Sólo letras y números</small>
<input type="text"
id="direccion"
name="direccion"
pattern="[A-Za-z0-9]+"
title="Sólo letras y números" >
<br><br>
<input type="submit">
</form>
Vista previa
Contraseña
<form action="">
<label for="contrasena">Contraseña:</label><br>
<small>Al menos un número, una letra en mayúscula, una letra en minúscula y al menos 8 caracteres</small>
<input type="text"
id="contrasena"
name="contrasena"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Al menos un número, una letra en mayúscula, una letra en minúscula y al menos 8 caracteres" >
<br><br>
<input type="submit">
</form>
Vista previa
<form action="">
<label for="email">Email:</label><br>
<small>Debe contener tres cadenas separadas por un @ y un punto</small>
<input type="text"
id="email"
name="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
title="Debe contener tres cadenas separadas por un @ y un punto" >
<br><br>
<input type="submit">
</form>
Vista previa
Url
<form action="">
<label for="url">Url:</label><br>
<small>Debe comenzar por http:// o https://</small>
<input type="text"
id="url"
name="url"
pattern="https?://.+"
title="Debe comenzar por http:// o https://" >
<br><br>
<input type="submit">
</form>
Vista previa
Validación
Aunque este atributo nos aporta una capa de validación en el formulario HTML, es necesario realizar las mismas validaciones al enviar el formulario, en el lado del servidor.
El código HTML de una web es facilmente modificable, por ejemplo desde el inspector de elementos del propio navegador.
Todas las validaciones que añadamos a nuestros formularios, bien sea mediante atributos HTML, por JavaScript u otros métodos nunca serán suficientes, lo que nos obligará a realizar las comprobaciones necesarias en el lado servidor.