Validación de formularios del lado del cliente usando Vanilla JavaScript

En este tutorial, veremos cómo validar la entrada de un formulario en JavaScript, para un formulario de registro. Usaremos la validación de formularios del lado del cliente en JavaScript estándar.

Introducción

La mayoría de las aplicaciones web de hoy en día requerirán que complete un formulario en algún momento, ya sea una aplicación de banca en línea o un servicio de transmisión de música.

Y debido a que nunca se puede confiar en los usuarios finales, debemos proteger nuestra aplicación para que detecte cuando la entrada es incorrecta y se la devuelva al usuario con un mensaje (de error) apropiado.

La validación de formularios es una técnica utilizada para evitar que los usuarios proporcionen datos que no cumplan con los requisitos de la aplicación. Un ejemplo sería asegurarse de que la contraseña proporcionada tenga al menos un carácter en mayúscula y un número. Puede validar datos en el lado del servidor o en el lado del cliente.

Validación del lado del servidor es la idea de validar los datos del usuario después de enviarlos a los servidores. Si los datos no están en el formato esperado, se devuelven al usuario.

Por otro lado, la validación del lado del cliente implica validar los datos ingresados ​​por el usuario en el navegador antes de enviarlos al servidor. Esto suele ser más eficiente que la validación del lado del servidor, ya que evita el viaje de ida y vuelta del cliente al servidor y viceversa. También es un filtro temprano, que garantiza que se transmitan los datos correctos, en lugar de tratar con los datos incorrectos una vez que se han transmitido.

Esto no significa que el servidor no deba tener validación de datos, solo estamos revisando inicialmente ahora.

En este tutorial, discutiremos cómo podemos validar datos en el navegador usando JavaScript estándar.

Creación de un formulario

Hagamos un formulario de registro simple, que constará de los siguientes campos:

  1. nombre de usuario
  2. ‘primera contraseña’: se usa para verificar la contraseña inicial para ciertos criterios
  3. ‘segunda contraseña’: se usa como confirmación y se asegura de que el usuario no haya cometido un error tipográfico en el campo ‘primera contraseña’.

... y colóquelo en nuestro archivo index.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script defer src="validate.js"></script>

    <title>Form Validation</title>
  </head>
  <body>
    <h1>Form Validation Using JavaScript</h1>

    <form id="form" action="/" method="GET">
      <!-- We are only interested in client-side validation now -->

      <!-- All the fields are required -->
      <div>
        <label for="username">Username: </label>
        <input type="text" name="username" id="username" autofocus required />
      </div>

      <div>
        <label for="first-password">Password: </label>
        <input
          type="password"
          name="firstPassword"
          id="first-password"
          required
        />
      </div>

      <div>
        <label for="second-password">Confirm Password: </label>
        <input
          type="password"
          name="secondPassword"
          id="second-password"
          required
        />
      </div>

      <button type="submit">Submit</button>
    </form>

    <div id="show-error">No validation error yet!</div>
    <!--We will use this div to display validation error -->
  </body>
</html>

Este archivo HTML generará un formulario simple que se ve así:

Requisitos de formulario

Antes de escribir cualquier código, primero repasemos la lista de validaciones que necesitamos:

  • Asegúrese de que el nombre de usuario comience con una letra mayúscula
  • El nombre de usuario debe tener al menos un dígito incluido
  • Asegúrese de que la longitud de la contraseña sea de entre 8 y 20 caracteres
  • Asegúrese de que la contraseña contenga al menos una letra mayúscula
  • Confirme que las dos contraseñas coincidan

En caso de que la entrada del usuario no cumpla con los requisitos anteriores, queremos:

  • El texto del último div para cambiar
  • Impedir que el formulario se envíe

Configuración

Primero, hagamos un archivo de script validate.js y vincúlelo con nuestro archivo index.html dentro de nuestra etiqueta head:

1
<script defer src="validate.js"></script>

Luego, accedamos a los campos relevantes del documento:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// To disable the form from submitting
const form = document.querySelector('#form');
// To display the error message
const errorDiv = document.querySelector('#show-error');
// To validate the username
const username = document.querySelector('#username');
// To validate the password
const firstPassword = document.querySelector('#first-password');
// To confirm the password
const secondPassword = document.querySelector('#second-password'); 

En aras de la simplicidad, hagamos que las validaciones del formulario solo se ejecuten al hacer clic en el botón enviar, y no en tiempo real:

1
2
3
form.addEventListener('submit', (error) => {
    // All validation checks are run in this method.   
}

Implementación de los validadores

La primera letra del nombre de usuario está en mayúscula {#la primera letra del nombre de usuario está en mayúscula}

Esto se explica por sí mismo, si la primera letra de la cadena es la misma que su variante en mayúscula, significa que nombre de usuario de hecho comienza con una letra mayúscula:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// We will inlcude any and all errors in this string
let incorrectInput = '';

const firstLetter = username.value[0];

// Return true if first letter is uppercase
const firstLetterIsUpperCase = (firstLetter === firstLetter.toUpperCase()); 

if (!firstLetterIsUpperCase) {
    incorrectInput += ' The first letter of username must be uppercase.\n';
}

El nombre de usuario contiene al menos un dígito

/\d/ es un patrón de expresión regular que coincide con un solo dígito, lo que significa que si coincide incluso una vez dentro del nombre de usuario proporcionado, el nombre de usuario contiene un dígito:

1
2
3
4
5
6
// Regex to see if a digit is in the username, returns true if there is
const usernameIncludesDigit = /\d/.test(username.value); 

if (!usernameIncludesDigit) {
    incorrectInput += 'Username must include at least one digit.\n';
}

La contraseña tiene entre 8 y 20 caracteres {#la contraseña tiene entre 8 y 20 caracteres}

El atributo de cadena longitud debería darnos el número de caracteres en la contraseña. Una declaración condicional simple debería hacer el truco:

1
2
3
4
5
const badPasswordLength = (firstPassword.value.length < 8 || firstPassword.value.length > 20);

if (badPasswordLength) {
    incorrectInput += ' The password should be within 8 to 20 characters.\n';
}

La contraseña contiene al menos un carácter en mayúsculas

Esto es similar a lo que hicimos para el nombre de usuario. Solo necesitamos modificar la expresión regular para buscar letras mayúsculas en lugar de dígitos:

1
2
3
4
5
6
// Regex to see if a digit is in the username, returns true if there is
const passwordIncludesUppercase = /[a-z]/.test(firstPassword.value); 

if (!passwordIncludesUppercase) {
    incorrectInput += ' The password should contain at least one uppercase character.\n';
} 

Verificar que las dos contraseñas sean iguales {#verificar que las dos contraseñas sean iguales}

Finalmente, necesitamos comparar firstPassword con secondPassword para ver si coinciden:

1
2
3
if (firstPassword.value !== secondPassword.value) {
    incorrectInput += 'The passwords do not match.\n';
}

Visualización de los mensajes de error

Después de todas estas comprobaciones, si alguna condición no se cumple, incorrectInput no será una cadena vacía y contendrá el problema planteado en ese bloque condicional.

En este caso, cambiaremos el texto en errorDiv para mostrar nuestros errores en rojo:

1
2
3
4
5
6
7
8
if (incorrectInput !== "") {
    // Change the error div tag to display the error message(s)
    errorDiv.innerText = incorrectInput; 
    // Change the color of the text to red
    errorDiv.style.color = 'red'; 
    // Prevent the form button from submitting again, before fixing the issues
    error.preventDefault(); 
}

Prueba del código

Y ahora, probemos nuestro nuevo formulario con la siguiente entrada:

  • Nombre de usuario: johndoe
  • Contraseña: 42
  • Confirmar contraseña: 421

Lo cual debería arrojar los siguientes resultados:

Conclusión

En este artículo, usamos JavaScript estándar para validar un formulario HTML simple.

JavaScript nos permitió definir comprobaciones de validación personalizadas que se ajustan a nuestro caso de uso. Por ejemplo, puede agregar patrones personalizados que debe cumplir una contraseña para que un usuario se registre en su sitio web.