Atributo pattern en HTML

Atributo pattern en HTML

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


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


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


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


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


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.

Escribe una respuesta