¿Cómo validar un formulario con jQuery en solo dos minutos?

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="[email protected]">

    <label for="password">Contraseña</label>

    <input type="password" name="password" id="password" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;">

    <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).