SitePoint | ISNCA

Este tutorial muestra cómo configurar una validación básica de formularios con jQuery, demostrado con un formulario de registro.

Vamos a utilizar el plugin de validación de jQuery para validar nuestro formulario. El principio básico de este plugin es especificar reglas de validación y mensajes de error para elementos HTML en JavaScript.

Aquí tienes una demostración en vivo de lo que vamos a construir:

Ver el Pen
jQuery Form Validation by SitePoint (@SitePoint)
en CodePen.

Paso 1: Incluir jQuery

Primero, necesitamos incluir la librería jQuery. El plugin de validación de jQuery ha sido probado hasta la versión 3.1.1 de jQuery, pero la demo de este artículo funciona perfectamente con la versión 3.4.1, que es la más reciente.

Puedes usar cualquiera de las siguientes opciones de descarga:

Descargarlo desde jquery.com
Descargarlo usando Bower: $ bower install jquery
Descargarlo usando npm o Yarn: $ npm install jquery o yarn add jquery

Utilizar un CDN: https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

Crea un nuevo archivo HTML llamado index.html e incluye jQuery antes de la etiqueta de cierre </body>:

<!-- Change the "src" attribute according to your installation path --><script src="vendor/jquery/dist/jquery.min.js"></script>

Si quieres usar Bower o npm pero no estás familiarizado con ellos, te pueden interesar estos dos artículos:

Gestión de paquetes para el navegador con Bower
Guía para principiantes de npm – el gestor de paquetes de Node

Paso 2: Incluir el plugin de validación de jQuery

Elige entre:

Descargarlo desde el repo de github del plugin
Descargarlo usando Bower: $ bower install jquery-validation
Descargarlo usando npm: npm i jquery-validation
NuGet: Install-Package jQuery.Validation
Usa un CDN: https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js

Incluye el plugin después de jQuery:

<!-- Change the "src" attribute according to your installation path --><script src="vendor/jquery-validation/dist/jquery.validate.min.js"></script>

Paso 3: Crear el formulario HTML

Para el registro, queremos recoger la siguiente información del usuario:

nombre
apellido
correo electrónico
contraseña

<div class="container"> <h2>Registration</h2> <form action="" name="registration"> <label for="firstname">First Name</label> <input type="text" name="firstname" placeholder="John"/> <label for="lastname">Last Name</label> <input type="text" name="lastname" placeholder="Doe"/> <label for="email">Email</label> <input type="email" name="email" placeholder="[email protected]"/> <label for="password">Password</label> <input type="password" name="password" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;"/> <button type="submit">Register</button> </form></div>

Al integrar esto en una aplicación real, no olvides rellenar el atributo action, para asegurarte de que el formulario se envía al destino correcto.

Paso 4: Crear estilos para el formulario

Crea un nuevo archivo, css/styles.css, e inclúyelo 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;}

Nota los estilos para .error, que se utilizarán para los mensajes de error de validación.

Paso 5: Crear las reglas de validación

Por último, necesitamos inicializar el plugin de validación de formularios. Crea un nuevo archivo js/form-validation.js y haz referencia a él después de la etiqueta <script> del plugin de validación jQuery:

<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").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: "Please enter your firstname", lastname: "Please enter your lastname", password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long" }, email: "Please enter a valid email address" }, // Make sure the form is submitted to the destination defined // in the "action" attribute of the form when valid submitHandler: function(form) { form.submit(); } });});

Conclusión

¡Ya está, has terminado! Ahora tienes una idea de cómo configurar 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 malicioso manipule o se salte las reglas de validación (por ejemplo, utilizando las herramientas de desarrollo del navegador).

Cómo configurar una validación básica de formularios con jQuery en dos minutos