Tabla de contenido
Métodos como los selectores mediante el querySelector o querySelectorAll o variables con const, let y var permiten que nosotros como desarrolladores, podamos interactuar con los elementos o componentes de HTML comúnmente denominado DOM
En el artículo anterior: Validación de login con Javascript, empezamos a comprender puntos importantes de Javascript que diariamente utilizamos.
Es por ello que en esta ocasión te vengo a hablar acerca de otra forma de obtener selectores y también otra forma de hacer la validación de login con Javascript.
Al igual que la vez anterior, empezaremos por hacer unas ligeras modificaciones a nuestro documento HTML, te recuerdo que en el artículo anterior te dejé todo el código del proyecto, por lo que podrás obtenerlo de ahí en caso de no contar con el.
Modificando código HTML
Los cambios que haremos por el momento en el HTML son 3:
El primero y segundo, consisten en agregar a los inputs de usuario y contraseña una clase que en este caso le denominamos validate, el código queda de la siguiente manera:
<input type="text" name="username" id="username" class="validate">
<input type="password" name="password" id="password" class="validate">Como puede observar, todo el input quedo de manera muy similar a la anterior, con la única modificación que se añadió para cada uno de los inputs el `class=”validate”`
El tercer cambio que vamos a hacer consiste en que vamos a agregar un párrafo que nos permita darle retroalimentación de la validación al usuario, mandando mensajes que le digan que alguno de estos campos no puede estar vacío.
Para eso, vamos a agregar las siguientes líneas en HTML, yo las agregué justo después del botón de submit, pero tu las puedes agregar donde creas conveniente.
<div class="alert">
<p id="feedback"></p>
</div>¡Listo!, hemos terminado nuestras modificaciones a HTML y ahora pasaremos el turno a CSS para este proyecto de validación de login con Javascript, utilizando los métodos document.querySelectorAll
Pasamos al CSS
Para ello, en CSS, las modificaciones que agregamos fueron las siguientes:
.alert {
background: lightcoral;
padding: 4px 10px;
margin-top: 10px;
border-radius: 4px;
display: none;
transition: all ease .5s;
}Simplemente le dimos estilo al nuevo div que agregamos con la clase alert, lo interesante de eso es que si observas, le pusimos un display none, para que el usuario no pueda ver el alert de primera instancia, ya que eso lo manejaremos con el Javascript
Ahora si, ¿Qué es eso de querySelectorAll?
En el artículo anterior te decía que cuando tenemos un elemento de HTML al cual queremos hacer referencia desde Javascript, utilizamos algunos métodos que nos ayudan a seleccionarlo y se denominan selectores.
El selector más común actualmente es querySelector, el cual nos permite obtener elementos únicos, por lo que habíamos hecho algo como esto:
const btn = document.querySelector("#btnSubmit")¿Qué es lo que hace este código? Obtiene mediante el método querySelector un elemento de HTML que tiene como id btnSubmit (Podemos inferir que es el botón), y lo asigna a una variable que en Javascript denominamos btn.
Ahora, ¿Qué sucede cuando sabemos que son múltiples los elementos que queremos seleccionar? querySelector sigue cumpliendo su función pero solo obtendrá el primer elemento de la lista, por ejemplo:
Imagina que tenemos una clase que se llama botones, probablemente tengamos varios botones en nuestra página web, si nosotros ocupamos el método querySelector, lo que haremos es que de todos los botones que tengamos en la página, solo el primero podemos manipular, es decir, querySelector es funcional, pero para este caso no cumple al 100% la funcionalidad que queremos.
Es por ello que ahora añadiremos un nuevo método que se denomina document.querySelectorAll, veamos un poco de código.
const btn = document.querySelector("#btnSubmit")
const feedback = document.querySelector("#feedback")
const alert = document.querySelector(".alert")
const fields = document.querySelectorAll(".validate")
let errors = []Observa que en las líneas 1, 2 y 3 se están utilizando los métodos querySelector, el primero para un id btnSubmit, el segundo feedback y el tercero, una clase alert…
Espera, ¿Me acabas de decir que para las clases usemos querySelectorAll? No. observa lo siguiente, en el código estamos totalmente seguros que solo tenemos un elemento de la clase alert, por lo que es totalmente funcional que lo seleccione mediante querySelector.
Ahora, si observamos en la línea 4, ahí podemos encontrar en metodo querySelectorAll con una clase validate (Recuerda que la clase validate es la clase que agregamos a nuestros inputs del formulario en HTML).
Como la clase validate está asignada a 2 elementos del HTML, entonces, aquí es donde toma sentido utilizar querySelectorAll para obtener todos los elementos en una lista.
¿Qué es una lista o arreglo?
Como son más de un elemento los que hemos seleccionado con querySelectorAll, entonces, Javascript los añade a una lista o arreglo, es decir, es una colección ordenada de datos para poderlos trabajar dentro de un mismo elemento, que en este caso, es la variable fields.
Algo importante que tenemos que tener en cuenta es que ya no tenemos acceso directo a cada uno de los elementos, ya que el input del usuario, se encuentra en la posición fields[0], mientras que el password, se encuentra en la posición fields[1]
Recuerda que los arreglos siempre inician a partir de la posición 0.
¿querySelectorAll forEach?
Es por ello que ahora tenemos que empezar a recorrer esa lista de nodos, y para ello nos ayudaremos de un método denominado forEach, veamos como queda:
btn.addEventListener("click", function (event) {
event.preventDefault()
fields.forEach(function (field) {
if (field.value == "") {
field.classList.add("errorField")
errors.push(field.id)
}
})
alert.style.display = "block"
feedback.innerHTML = `Los campos ${errors.toString()} no pueden estar vacíos`
setTimeout(function () {
alert.style.display = "none"
}, 3000)
})Como podemos observar, volvemos a hacer uso del evento click, similar a lo que hicimos en el artículo anterior, despues prevenimos la acción por defecto y a partir de la línea 3 es cuando hacemos uso de forEach
Si observas en la línea 3 le estamos diciendo que por cada campo (field) que se encuentra dentro de campos (fields), hagamos una función, la cual consiste en validar si está vacío y en caso de estarlo, añadir una clase errorField y agregar el id del campo a un arreglo errors (definido arriba 👆🏼)
Después de hacer todo el recorrido de campos, observa que cambiamos el estilo CSS del alert mediante la propiedad display con valor block, y agregamos al párrafo que se encuentra adentro la leyenda mencionando que los campos no pueden estar vacíos.
el método toString, sirve para poder convertir un arreglo a cadena, separando cada dato por una coma.
Para poder finalizar con esta parte, añadimos una función setTimeout que cuenta con dos parámetros: una función y el tiempo que esperará, en este caso 3 segundos (recuerda que el valor se expresa en milisegundos).
En la función simplemente le decimos que el display lo pase a none, como inicialmente estaba, es decir, el mensaje se mostrará por 3 segundos y después desaparecerá 🥷🏾.
¿querySelectorAll addEventListener?
Para poder finalizar la validación, refactorizamos un poco el evento keyup, quedando de la siguiente manera:
fields.forEach(function (field) {
field.addEventListener("keyup", function () {
field.classList.remove("errorField")
})
})Observa que de nueva cuenta estamos recorriendo los fields y a cada uno le estamos asignando un evento keyup, en el cual, si se ha escrito dentro del campo, entonces se remueve la clase errorField
Conclusiones
En resumen, podemos ver que existen múltiples formas de validar formularios de login utilizando Javascript, sin embargo, el objetivo concreto de estos artículos es que tu puedas mejorar tus habilidades conociendo los fundamento básicos de Javascript
Desde variables con const, let y var, como métodos como querySelector, querySelectorAll, forEach o setTimeout, y manejando eventos como click o keyup mediante addEventListener.
Poco a poco iremos avanzando, obteniendo experiencia, mejorando nuestra lógica y con ello podremos refactorizar y optimizar estos códigos.
Recuerda que todo el contenido, también lo podrás encontrar en mi canal de Youtube y específicamente la lista de reproducción Curso javascript desde cero, te pido que te suscribas, actives la campanita, me dejes un comentario y un like para poder crecer.
Sígueme en mis redes sociales: Instagram y Tiktok
Te veo en la próxima entrega. ¡Hasta la próxima!
