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

Código de idioma:
Dos letras en mayúscula

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

Dirección:
Sólo letras y números

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

Contraseña:
Al menos un número, una letra en mayúscula, una letra en minúscula y al menos 8 caracteres

Email

<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

Email:
Debe contener tres cadenas separadas por un @ y un punto

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

Url:
Debe comenzar por http:// o https://

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.