Cómo implementar la validación de formularios del lado del cliente con JavaScript

agosto 26, 2021 Aranzulla de Los Pobres

JavaScript es uno de los lenguajes de programación más populares y versátiles con los que puede comenzar hoy. Se dice con razón que este lenguaje de programación es el lenguaje de la web y es esencial para agregar interactividad a sus sitios web.

El elemento de formulario es uno de los elementos HTML más utilizados en los sitios web. Estos formularios toman información del usuario y la procesan en el navegador o servidor. Sin embargo, es importante validar estas entradas para abordar problemas de seguridad y errores no deseados.

Entendiendo la manipulación DOM

Antes de proceder a implementar la validación de formularios del lado del cliente con JavaScript, es esencial comprender el Modelo de objetos de documento, comúnmente conocido como "DOM". El DOM es una API estandarizada que permite que JavaScript interactúe con elementos en una página web HTML.

Más información: El héroe oculto de los sitios web: comprensión del DOM

Para agregar detectores de eventos y recuperar entradas de usuario, deberá comprender los conceptos básicos de la manipulación DOM. Aquí hay un ejemplo que explica cómo puede cambiar el contenido de la página web usando la API DOM y JavaScript:

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Document</title>
 </head>
 <body>
 <p id="paragraph"></p>
 </body>
 <script>
 const paragraph = document.getElementById('parapgraph');
 paragraph.innerText = 'This is a paragraph tag';
 </script>
 </html>

En el código anterior, la etiqueta <p> tiene una identificación de párrafo . Mientras escribe el código JavaScript, puede acceder a este elemento llamando al método document.getElementById ('paragraph') y manipulando su valor.

Ahora que ha entendido los conceptos básicos de la manipulación DOM, sigamos adelante e implementemos la validación de formularios.

Validación de formularios con JavaScript

Hay varios tipos de entradas que puede recibir de un usuario. El tipo de texto, el tipo de correo electrónico, el tipo de contraseña, los botones de opción y las casillas de verificación son algunos de los más comunes que puede encontrar. Debido a esta gran mayoría de tipos de entrada, deberá utilizar una lógica diferente para validar cada uno de ellos.

Antes de profundizar en la validación, tomemos un momento para comprender los formularios HTML y su importancia. Los formularios HTML son una de las principales formas en que interactúa con el sitio web, ya que le permiten ingresar sus datos, aplicar cambios, invocar ventanas emergentes, enviar información a un servidor y más.

El elemento HTML <form> se utiliza para crear estos formularios de cara al usuario. Así es como puede validar las entradas de un formulario HTML:

1. Validación de correo electrónico

Ya sea que esté creando un sistema de autenticación o simplemente recopilando correos electrónicos de usuarios para su boletín, es importante validar el correo electrónico antes de poder almacenarlo en su base de datos o procesarlo. Para comprobar si un correo electrónico cumple todas las condiciones requeridas, puede utilizar una expresión regular .

HTML:

 <input type="email" placeholder="[email protected]" id="email" required />

JavaScript:

 const emailInput = document.getElementById('email');
 const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
 if (!emailInput.value.match(emailRegex)) {
 alert('Invalid email address.');
 }

2. Validación de contraseña

Las contraseñas son un dato crucial que necesita un tipo especial de validación para garantizar su seguridad. Considere un formulario de registro que tenga dos campos: contraseña y confirmar los campos de contraseña. Para validar este par de entradas, aquí hay algunas cosas que debe considerar:

La contraseña debe tener más de 6 caracteres.
El valor de la contraseña y el campo de confirmación de contraseña deben ser iguales.

HTML:

 <input type="password" placeholder="Enter your password" id="password" required />
 <input type="password" placeholder="Enter your password" id="confirm-password" required />

JavaScript:

 const password = document.getElementById('password').value;
 const confirmPassword = document.getElementById('confirm-password').value;
 if (password.value !== confirmPassword.value) {
 alert('Entered passwords do not match');
 }
 if (password.length < 6) {
 alert('Password must be more than 6 characters long')
 }

3. Validación de entrada de radio

La entrada de radio HTML es un tipo especial de elemento de control gráfico que permite al usuario elegir solo una de un conjunto predefinido de opciones mutuamente excluyentes. Un caso de uso común de tal entrada sería para seleccionar el género. Para validar dicha entrada, deberá verificar si al menos uno de ellos está seleccionado.

Esto se puede lograr usando los operadores lógicos como el operador AND ( && ) y NOT ( ! ) De esta manera:

HTML:

 <label for="male">Male</label>
 <input type="radio" id="male" name="gender" value="male" />
 <label for="female">Female</label>
 <input type="radio" id="female" name="gender" value="female" />
 <label for="others">Others</label>
 <input type="radio" id="others" name="gender" value="others" />

JavaScript:

 const genders = document.getElementsByName("gender");
 const validForm = false;
 let i = 0;
 while (!validForm && i < radios.length) {
 if (radios[i].checked) validForm = true;
 i++;
 }
 if (!validForm) alert("Must check some option!");

4. Seleccione Validación de entrada

El elemento HTML <select> se utiliza para crear una lista desplegable. Las etiquetas <option> dentro del elemento <select> definen las opciones disponibles en la lista desplegable. Cada una de estas etiquetas <option> tiene un atributo de valor asociado.

Para la opción predeterminada o inicial, puede establecer su valor como una cadena vacía para que se considere una opción no válida. Para todas las demás opciones, establezca un atributo de valor apropiado. A continuación, se muestra un ejemplo de cómo puede validar un elemento de entrada <select> :

HTML:

 <select id="title" required>
 <option value="">Select One</option>
 <option value="Mr">Mr</option>
 <option value="Mrs">Mrs</option>
 <option value="Ms">Ms</option>
 </select>

JavaScript:

 const title = document.getElementById('title');
 if (title.value = "") {
 alert('Please select a title');
 }

5. Validación de la casilla de verificación

Los elementos de entrada de la casilla de verificación de tipo se representan de forma predeterminada como casillas que están marcadas o marcadas cuando se activan. Una casilla de verificación le permite seleccionar valores únicos para enviarlos en un formulario. Las casillas de verificación son una opción popular para la entrada "aceptar términos y condiciones".

Para saber si una casilla de verificación está marcada o no, puede acceder al atributo marcado en la entrada de la casilla de verificación. He aquí un ejemplo:

HTML:

 <input type="checkbox" id="terms">
 <label for="terms">I agree to the terms and conditions</label>

JavaScript:

 const terms = document.getElementById('terms');
 if (!terms.checked) {
 alert('Please agree to the terms and conditions to proceed further.');
 }

Es mejor prevenir que curar

Siempre se recomienda validar todas las entradas que recibe de un visitante para brindar una experiencia segura. Los piratas informáticos siempre intentan ingresar datos maliciosos en los campos de entrada para realizar ataques de secuencias de comandos entre sitios e inyecciones de SQL.

Ahora que comprende cómo validar sus entradas HTML, ¿por qué no intentarlo creando un formulario e implementando las estrategias que ha visto anteriormente?