Al agregar validación de formularios web con HTML, se asegurará de que los usuarios ingresen sus datos con precisión y en el formato correcto. En el pasado, la validación de las entradas de formularios requería el uso de complementos de JavaScript, pero hoy en día la mayoría de los navegadores tienen soluciones integradas que pueden manejar la mayor parte de la validación.
En este tutorial le mostraremos cómo agregar reglas de validación a sus formularios, utilizando únicamente atributos de entrada HTML nativos.
Para demostrar el proceso de creación de reglas de validación, hemos preparado un formulario de registro HTML simple usando Bootstrap 4, usando sus clases para hacerlo responsive .
Diseño
HTML
Nuestro diseño consiste en un formulario Bootstrap con un par de campos de entrada y un botón de envío. Para este ejemplo, hemos utilizado 3 tipos diferentes de campos de entrada: una entrada de texto, una entrada de contraseña y una entrada de correo electrónico.
<div class="registration-form">
<form>
<h3 class="text-center">Registrarse</h3>
<div class="form-group">
<input class="form-control item" type="text" name="username" maxlength="15" minlength="4" pattern="^[a-zA-Z0-9_.-]*$" id="username" placeholder="Nombre de Usuario" required>
</div>
<div class="form-group">
<input class="form-control item" type="password" name="password" minlength="6" id="password" placeholder="Password" required>
</div>
<div class="form-group">
<input class="form-control item" type="email" name="email" id="email" placeholder="Email" required>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block create-account" type="submit">Registrarse</button>
</div>
</form>
</div>
CSS
También hemos agregado algunos estilos CSS básicos para que se vea su funcionamiento.
html {
background-color : # 214c84 ;
background-blend-mode : superposición;
pantalla : flexión;
alinear elementos : centro;
justify-content : center;
background-image : url (../../assets/img/image4.jpg);
background-repeat : no-repeat;
fondo de pantalla : cubierta;
altura : 100% ;
}
cuerpo {
color de fondo : transparente;
}
.registration-form {
relleno : 50px 0 ;
}
.registration-form form {
max-width : 800px ;
relleno : 50px 70px ;
radio del borde : 10px ;
caja-sombra : 4px 4px 15px rgba (0, 0, 0, 0.2);
color de fondo : #fff ;
}
.registration-form form h3 {
font-weight : bold;
margen inferior : 30px ;
}
.registration-form .item {
border-radius : 10px ;
margen inferior : 25px ;
relleno : 10px 20px ;
}
.registration-form .create-account {
border-radius : 30px ;
relleno : 10px 20px ;
tamaño de letra : 18px ;
font-weight : negrita;
color de fondo : # 3f93ff ;
borde : ninguno;
color : blanco;
margen superior : 20px ;
}
@ media (max-width: 576px ) {
.registration-form form {
relleno : 50px 20px ;
}
}
Tipos de validación
HTML5
ofrece una manera agradable y fácil para la validación en línea, utilizando atributos de entrada. Hay una gran cantidad de atributos disponibles, solo veremos algunos de los más comunes. Para obtener una lista completa, puede visitar esta excelente guía MDN.
required
Este atributo especifica que el campo de entrada no puede estar vacío. Requiere que el usuario ingrese algo antes de enviar el formulario.
maxlength y minlength
Especifica la cantidad máxima / mínima de símbolos que el usuario puede ingresar en el campo de entrada. Esto es especialmente útil en campos de contraseña donde una contraseña más larga significa una contraseña más segura.
pattern
Especifica una expresión regular que tiene que coincidir para que los datos ingresados pasen. Se puede usar con los siguientes tipos de entrada: texto, búsqueda, url, correo electrónico y contraseña.
