Validación de formularios en el lado del cliente utilizando JavaScript

Validación de formularios con JavaScript en el cliente

El objetivo de este artículo es aprender cómo realizar validaciones de formularios en JavaScript. Con este propósito de aprendizaje, he diseñado un formulario de sitio web para el registro de registros de empleados utilizando HTML, CSS y JavaScript. Toda la lógica de validación del formulario está desarrollada utilizando JavaScript.

A continuación se muestra una demostración del proyecto:

El desarrollo del proyecto se divide en tres pasos:

  • Escribir el HTML
  • Agregar el CSS
  • Escribir el JavaScript

Escribir HTML para diseñar el formulario

<!--nombre del archivo validations.html--><html> <head> </head><body> <br> <h2>Sistema de Registro de Empleados</h2> <div class=”container”> <form id=”form” onsubmit=”validation()”> <div class=”title”><b>Por favor ingrese los valores</b></div> <! — Entrada para el nombre → <div> <label for=”fname”>Nombre</label> <input type=”text” name=”fname” id=”fname” placeholder=”Vivek”/> <p id=”err1"></p> </div> <! — Entrada para el apellido → <div> <label for=”lname”>Apellido</label> <input type=”text” name=”lname” id=”lname” placeholder=”Chaudhary”/><p id=”err2"></p> </div> <! — Entrada para el Id del empleado → <div> <label for=”eid”>Id del empleado</label> <input type=”text” name=”eid” id=”eid” placeholder=”1234"/> <p id=”err3"></p> </div>  <! — Entrada para el correo electrónico → <div> <label for=”email”>Correo electrónico</label> <input type=”email” name=”email” id=”email” placeholder=”[email protected]”/> <p id=”err4"></p> </div> <! — Entrada para el departamento → <div> <label for=”did”>Número de departamento</label> <input type=”text” name=”did” id=”did” placeholder=”10"/> <p id=”err5"></p> </div> <br><br> <button id=”btn” type=”submit”>Enviar</button> </form> </div></body></html>

Esto es cómo se ve el formulario en este momento:

Listo con el HTML.

Agregar CSS para dar estilo al formulario

El CSS nos ayuda a agregar estilo y efectos a nuestro formulario para que luzca más atractivo.

<style> * { margin: .5; padding: .5; box-sizing: border-box;}body { font-family: sans-serif;}form { display: flex; flex-direction: column; justify-content: center; max-width: 400px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); padding: 50px;}input[type=”text”],input[type=”email”]{ width: 100%; border: 1px solid #333; box-sizing: border-box}label { display: block; margin-bottom: 5px;}input:invalid{ box-shadow:0 0 5px 1px red;}input:focus { border: 2px solid #f2796e;}form div input { width: 100%; height: 40px; border-radius: 8px; outline: none; border: 2px solid #c4c4c4; padding: 0 30px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);}form div { position: relative; margin-bottom: 15px;}input:focus { border: 2px solid #f2796e;}button { margin-top: 15px; width: 100%; height: 45px; background-color: #6e98f2; border: 2px solid #6e98f2; border-radius: 8px; color: #fff; font-size: 20px; cursor: pointer; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.1s ease;}.success-icon,.failure-icon { right: 0.5; opacity: 0.5;}button:hover { opacity: 0.7;}</style>

Después de agregar componentes CSS a nuestros objetos HTML, así se ve nuestro formulario.

Terminado con el estilo.

Agregar JavaScript para validaciones.

JavaScript nos ayuda a acceder y modificar los elementos del DOM (Modelo de Objeto de Datos). He dividido el JavaScript en varias partes para facilitar su comprensión.

Acceder a los elementos HTML del DOM mediante sus IDs:

let fname=document.getElementById(“fname”);let lname=document.getElementById(“lname”);let eid=document.getElementById(“eid”);let email=document.getElementById(“email”);let did=document.getElementById(“did”);let form=document.getElementById(“form”)let err1=document.getElementById(“err1”)let err2=document.getElementById(“err2”)let err3=document.getElementById(“err3”)let err4=document.getElementById(“err4”)let err5=document.getElementById(“err5”)let successIcon = document.getElementsByClassName(“success-icon”)let failureIcon = document.getElementsByClassName(“failure-icon”)let deptno=[10,20,30,40,50]let btn=document.getElementById("btn").type

getElementById() es uno de los métodos más comunes en el DOM HTML. Se utiliza para acceder o modificar un elemento HTML.

getElementByClassName() devuelve una colección de elementos con un nombre de clase especificado.

Estamos utilizando ambos métodos para acceder a los componentes del formulario y modificar su comportamiento.

Definir una expresión regular para la validación de componentes del formulario

// Expresión regular de JavaScript para validar el nombrevar rName = /^[A-Za-z]+$/;// Expresión regular de JavaScript para validar EmpIDvar rEmpID=/\d{4}$/; // Expresión regular de JavaScript para validar el correo electrónico.var rEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g; //JS para validar deptnovar rDeptno = /^\d{2}$/;

Definir una función para la validación

// El nombre del archivo es validation.jsfunction validation() { // Validación del primer nombre if (fname.value==”” || !fname.value.match(rName)){ err1.innerHTML=”*El nombre no puede estar en blanco y debe contener solo caracteres”; fname.style.border = “2px solid red”; } else { err1.innerHTML=””; fname.style.border = “2px solid green”;  } // Validación del apellido if (lname.value==”” || !lname.value.match(rName)){ err2.innerHTML=”*El apellido no puede estar en blanco y debe contener solo caracteres”; lname.style.border = “2px solid red”; } else { err2.innerHTML=””; lname.style.border = “2px solid green”;  } // Validación del correo electrónico console.log(“El ID de correo electrónico es “,email.value) if (email.value==”” && !rEmail.test(email.value)){ console.log(“dentro del if de correo electrónico”) err4.innerHTML=”*El ID de correo electrónico debe contener información y ser válido. Por favor, siga las reglas”; email.style.border = “2px solid red”; } else { err4.innerHTML=””; email.style.border = “2px solid green”;  } // Validación del ID de empleado if (eid.value==”” || !rEmpID.test(eid.value)){ err3.innerHTML=”*Por favor, introduzca un ID de empleado válido que comience con 2 caracteres y 6 dígitos”; eid.style.border = “2px solid red”; } else { err3.innerHTML=””; eid.style.border = “2px solid green”;  } // Validación del número de departamento dept=Number(did.value) console.log(‘El valor del departamento es ‘,dept +” “+typeof(dept)) if (dept==”” || !rDeptno.test(dept)){ console.log(‘dentro del if’) err5.innerHTML=”*El número de departamento no puede estar vacío o no ser numérico. Por favor, verifique nuevamente”; did.style.border = “2px solid red”; }  else if(!dept==”” && !deptno.includes(dept)) { console.log(“valor del departamento ingresado “, did.value + “ “+typeof(did.value)) err5.innerHTML=”*El número de departamento debe ser de la lista de valores[10,20,30,40].                      Por favor, verifique nuevamente”; did.style.border = “2px solid red”; } else if(!dept==”” && deptno.includes(dept)){ console.log(‘dentro del segundo elif’) err5.innerHTML=””; did.style.border = “2px solid green”;  }}form.addEventListener(btn,(event)=>{  event.preventDefault()});

Validaciones

  1. Nombre
let fname=document.getElementById(“fname”);let err1=document.getElementById("err1");// Validación de Nombre en Javascriptvar rName = /^[A-Za-z]+$/;//validación de primer nombre if (fname.value=="" || !fname.value.match(rName)){ err1.innerHTML="*El nombre no puede estar en blanco y debe contener caracteres"; fname.style.border = "2px solid red"; } else { err1.innerHTML=""; fname.style.border = "2px solid green";  }
  • acceder al elemento de entrada de texto del formulario para el primer nombre usando document.getElementById(“fname”) y también acceder a la etiqueta de error usando document.getElementById(“err1”)
  • definir una expresión regular para primer nombre usando rName = /^[A-Za-z]+$/
  • la siguiente parte es el bloque if-else, donde se realiza la comparación para tomar acciones en el formulario. Si el primer nombre ingresado por el usuario es nulo o no cumple con los criterios de la expresión regular, el campo de texto se marcará en rojo con un mensaje de error.

  • cuando el primer nombre ingresado por el usuario cumple con la política, entonces el resultado es el siguiente, el campo de texto se marca en verde.

La lógica de validación del Apellido es la misma que la del Primer Nombre.

2. Email

let email=document.getElementById(“email”);let err4=document.getElementById("err4");//Validación de Email en Javascriptvar rEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g;//validación de email if (email.value=="" && !rEmail.test(email.value)){  err4.innerHTML="*El email debe ser válido y no estar vacío. Por favor, sigue las reglas"; email.style.border = "2px solid red"; } else { err4.innerHTML=""; email.style.border = "2px solid green";  }
  • acceder al elemento de entrada de texto del formulario para el email usando document.getElementById(“email”) y también acceder a la etiqueta de error usando document.getElementById(“err4”)
  • si el ID de correo electrónico ingresado por el usuario es nulo o no cumple con los criterios de la expresión regular, el campo de texto se marcará en rojo con un mensaje de error.

  • como hemos definido el campo de texto de entrada como tipo email, espera el símbolo “@” o de lo contrario mostrará un error como se muestra a continuación:

  • cuando el email ingresado por el usuario cumple con la política, entonces el resultado es el siguiente, el campo de texto se marca en verde.

3. Número de Departamento

let did=document.getElementById(“did”);let err5=document.getElementById("err5")//lista de valores para departamentoslet deptno=[10,20,30,40,50]//validación de número de departamento dept=Number(did.value) if (dept=="" || !rDeptno.test(dept)){ console.log('dentro del if') err5.innerHTML="*El número de departamento no puede estar vacío o no ser numérico. Por favor, verifica de nuevo"; did.style.border = "2px solid red"; }  else if(!dept=="" && !deptno.includes(dept)) { err5.innerHTML="*El número de departamento debe estar en la lista de valores [10,20,30,40]. Por favor, verifica de nuevo"; did.style.border = "2px solid red"; } else if(!dept=="" && deptno.includes(dept)){ err5.innerHTML=""; did.style.border = "2px solid green";  }}
  • accede al elemento de entrada del formulario de tipo texto para el correo electrónico usando document.getElementById(“did”). También accede a la etiqueta de error usando document.getElementById(“err5”).
  • si los valores ingresados por el usuario no satisfacen la condición if, entonces se genera un error y el campo de texto se marca en rojo.

  • si los valores ingresados por el usuario no satisfacen la condición else if, entonces se genera un error y el campo de texto se marca en rojo.

  • si los valores ingresados por el usuario satisfacen la condición else if, entonces el campo de texto se marca en verde.

Eso es todo con la lógica de validación de formularios escrita en JavaScript.

Resultados si todos los valores ingresados por el usuario son incorrectos:

Resultados si todos los valores ingresados por el usuario son correctos:

El alcance de este artículo se relaciona solo con las validaciones del lado del cliente.

Resumen:

  • escribe HTML para definir el formulario del proyecto.
  • agrega CSS para dar estilo a los elementos del formulario HTML.
  • JavaScript para manejar la validación del formulario en el lado del cliente.

Aprende cómo entrenar modelos de detección ...
Investigadores de UCSF y UC Berkeley han de...
40+ Herramientas de IA Geniales que Debería...
Meta AI lanza Code Llama un modelo de lengu...
Aprendizaje Incremental Beneficios, Impleme...
De la idea al negocio impulsado por IA 5 pa...
IA

IA

Explora el mundo de la Inteligencia Artificial y su potencial transformador