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

Estrada Web Group
Administrador
¿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="john@doe.com">

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

Compartir artículo:

Más artículos geniales

¿Cómo utilizar las condiciones if else o estructuras de decisión en JavaScript? y ¿Qué es un if en JavaScript?

¿Cómo utilizar las condiciones if else o estructuras de decisión en JavaScript? y ¿Qué es un if en JavaScript?

La toma de decisiones en programación es similar a la toma de decisiones en la vida real. En programación también enfrentamos algunas situaciones en las que queremos que se ejecute un cierto bloque de código cuando se cumple alguna condición.

Ver artículo completo
¿Qué es una Cookie? y ¿Cómo crearlas y leerlas con jQuery?

¿Qué es una Cookie? y ¿Cómo crearlas y leerlas con jQuery?

En este artículo explicaré con un ejemplo, cómo agregar cookies usando jQuery, es decir, guardar y consultar cookies en el navegador usando jQuery. Pero primero veremos que es una cookie y que se puede hacer con ella.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla ;