¿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

¿Qué es una función lambda en C#?

¿Qué es una función lambda en C#?

Resumen: en este artículo aprenderás sobre las funciones Lambda en C#, cómo crearlas, cómo utilizarlas en problemas comunes, las mejores prácticas y ejemplos para practicar

Ver artículo completo
Cómo usar los parámetros por default en una función en JavaScript

Cómo usar los parámetros por default en una función en JavaScript

En JavaScript, los parámetros predeterminados son valores predefinidos que se asignan a los parámetros de una función si no se proporciona un valor al llamar a la función.

Ver artículo completo
Concatenar strings en JavaScript con concat

Concatenar strings en JavaScript con concat

Resumen: en este tutorial, aprenderás a usar el método concat() de JavaScript para concatenar strings (cadenas de texto).

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