
Este tutorial te muestro cómo validar un formulario con jQuery
de forma muy rápida y sencilla, para la demostración utilizaré un formulario de registro.
Voy a utilizar el plugin de validación jQuery para validar nuestro formulario. El principio básico de este plugin es especificar las reglas de validación y los mensajes de error para los elementos HTML
en JavaScript
.
Aquí hay una demostración en vivo de lo que vamos a construir:
See the Pen ExPLyqp by Estrada WebGroup (@jiestradah) on CodePen.
Paso 1: Incluya la librería de jQuery
Primero, necesitamos incluir la librería jQuery
. El plugin de validación jQuery
se ha probado hasta la versión 3.1.1 de jQuery
, pero la demostración en este artículo funciona perfectamente con la versión 3.4.1, que es la última.
Puede usar cualquiera de las siguientes opciones de descarga:
- Descárgalo de jquery.com
- Usa el CDN: https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
Crea un nuevo archivo HTML
llamado index.html e incluye la librería jQuery antes de la etiqueta de cierre </body>
:
<script src="vendor/jquery/dist/jquery.min.js"></script>
Paso 2: incluye el plugin de validación jQuery
Escoger entre:
- Descárgalo del repositorio de github del complemento
- Usa el CDN: https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js
Incluye el plugin después de la librería jQuery
:
<script src="vendor/jquery-validation/dist/jquery.validate.min.js"></script>
Paso 3: crea el formulario HTML
Para el registro, queremos recopilar la siguiente información del usuario:
- nombre
- apellido
- correo electrónico
- contraseña
Entonces, crea el formulario que contiene estos campos de entrada:
<div class="container">
<h2 class="title">Registrarme</h2>
<form action="#" name="registration">
<label for="firstname">Nombre</label>
<input type="text" name="firstname" id="firstname" placeholder="John">
<label for="lastname">Apellidos</label>
<input type="text" name="lastname" id="lastname" placeholder="Doe">
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="john@doe.com">
<label for="password">Contraseña</label>
<input type="password" name="password" id="password" placeholder="●●●●●">
<button type="submit">Registrarme</button>
</form>
</div>
Al integrar esto en una aplicación real, no olvides modificar el atributo de acción para asegurarte de que el formulario se envíe al destino correcto.
Paso 4: crear estilos para el formulario
Crea un nuevo archivo, css/styles.css e inclúyalo en la sección <head> de tu archivo HTML:
<link rel="stylesheet" href="css/style.css"/>
Copia los siguientes estilos en el archivo recién creado:
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
/* Styles */
* {
margin: 0;
padding: 0;
}
body {
font-family: "Open Sans";
font-size: 14px;
}
.container {
width: 500px;
margin: 25px auto;
}
form {
padding: 20px;
background: #2c3e50;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
form label,
form input,
form button {
border: 0;
margin-bottom: 3px;
display: block;
width: 100%;
}
form input {
height: 25px;
line-height: 25px;
background: #fff;
color: #000;
padding: 0 6px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
form button {
height: 30px;
line-height: 30px;
background: #e67e22;
color: #fff;
margin-top: 10px;
cursor: pointer;
}
form .error {
color: #ff0000;
}
Ten en cuenta los estilos para .error, que se utilizarán para los mensajes de error de validación.
Paso 5: crear las reglas de validación
Finalmente, necesitamos inicializar el plugin de validación de formularios. Crea un nuevo archivo js/form-validation.js y agrega referencia a él después de la etiqueta <script> del plugin jQuery Validation:
<script src="js/form-validation.js"></script>
Copia el siguiente código en el archivo recién creado:
// Wait for the DOM to be ready
$(function() {
// Initialize form validation on the registration form.
// It has the name attribute "registration"
$("form[name='registration']").validate({
// Specify validation rules
rules: {
// The key name on the left side is the name attribute
// of an input field. Validation rules are defined
// on the right side
firstname: "required",
lastname: "required",
email: {
required: true,
// Specify that email should be validated
// by the built-in "email" rule
email: true
},
password: {
required: true,
minlength: 5
}
},
// Specify validation error messages
messages: {
firstname: "Por favor, introduzca su nombre",
lastname: "Por favor, introduzca su apellido",
password: {
required: "Por favor proporcione una contraseña",
minlength: "Su contraseña debe tener al menos 5 caracteres."
},
email: "Por favor, introduce una dirección de correo electrónico válida"
},
submitHandler: function(form) {
form.submit();
}
});
});
Conclusión
¡Eso es todo, ya terminaste! Ahora tienes una idea de cómo agregar la validación de formularios con jQuery
. Ten en cuenta que esto no reemplaza la validación del lado del servidor. Todavía es posible que un usuario malintencionado manipule u omita las reglas de validación (por ejemplo, utilizando las herramientas de desarrollador del navegador).