Tabla de Contenido
Una de las acciones más comunes que realizamos cuando utilizamos Javascript es la validación de un login, es por ello que en este artículo, te mostraré como validar un formulario de login con Javascript
OJO: Es importante que te mencione que el objetivo de este artículo es mostrarte el uso de los Selectores y eventos, es por ello que esta será una validación de login con Javascript básica, por lo que existen mejores formas de poder realizar la validación de login con Javascript, pero el objetivo de esto, es que obtengas los conocimientos básicos del lenguaje.
¿Qué necesito para validar un formulario de login con Javascript?
Lo primero que haremos es generar una estructura básica de los archivos que necesitaremos, por lo que te recomiendo que en el escritorio de tu computadora, crees una carpeta que se denomine login-javascript y que contenga 3 archivos:
- index.html
- styles.css
- main.js
NOTA: esta es la estructura que yo te propongo, sin embargo, si quieres organizar de mejor manera tu código, meterlo en carpetas o cambiar el nombre de los archivos, puedes realizarlo sin problema, tomando únicamente en consideración que será necesario hacerlos cambios pertinentes en el archivo html.
Ya hice la estructura, ¿Qué sigue?
Ahora centraremos nuestra atención en el index.html (o como le hayas llamado), para ello, escribiremos el siguiente código que te iré explicando a continuación:
<!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">
<link rel="stylesheet" href="styles.css">
<title>Login</title>
</head>
<body>
<form action="#" method="POST">
<div>
<label for="username">Usuario</label>
<input type="text" name="username" id="username">
</div>
<div>
<label for="password">Contraseña</label>
<input type="password" name="password" id="password">
</div>
<div>
<button type="submit" id="btnSubmit">Iniciar sesión</button>
</div>
</form>
<script src="main.js"></script>
</body>
</html>Como puedes observar, este código es la estructura básica de un documento HTML, los puntos importantes a tomar en consideración de este código son:
En la línea 7 agregué la etiqueta <link /> con el nombre de mi archivo CSS,
De la línea 11 a la 23, es un simple formulario de HTML, Si no sabes como crear formulario o tienes alguna duda, te recomiendo esta lista de reproducción de mi canal de YouTube, por cierto, aprovechando la mención, te pido que te suscribas, actives la campanita, me dejes un like y un comentario, siempre es bueno para seguir creciendo 😂
Lo importante del formulario, se centra en las líneas 14, 18 y 21, en donde se generan los inputs o campos de texto y el botón que dará pie a la acción que generemos.
Observa que tanto los inputs como el botón tienen un atributo id, mismo que nos ayudará más adelante para poder validar el login con javascript
Por último, pero no menos importante, observa que en la línea 24 añadimos una etiqueta script, la cual tiene un atributo src con un valor main.js, mismo que es el nombre de mi archivo Javascript
Creando el CSS
Para que no se vea tan mal el formulario, adicionaremos un poco de CSS mediante este código:
body {
display: flex;
justify-content: center;
align-items: center;
}
form {
max-width: 50%;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
input {
width: 100%;
height: 15px;
padding: 7px;
display: block;
margin: 5px auto;
border: 1px solid #ccc;
}
button {
margin-top: 10px;
width: 100%;
height: 30px;
border-radius: 4px;
border: none;
background: #ffdd00;
display: block;
cursor: pointer;
transition: all ease 0.5s;
}
button:hover {
background: #535353;
color: #fff;
}
.errorField {
border: 1px solid red;
}La mayor parte de estas líneas de código, no son más que para poder estilizar un poco nuestro formulario, sin embargo, en lo que quiero que te centres y pongas mucha atención, es en la clase errorField que se declara a partir de la línea 42, ya que nos servirá más adelante para poder añadir funcionalidad a nuestro Javascript
¿Ya es mucho no crees? ¿Donde está mi validación de login con Javascript?
Ahora si, toca el turno de poder añadir código Javascript, es por eso que en el archivo main.js que creamos, adicionaremos las siguientes líneas:
const username = document.querySelector("#username")
const password = document.querySelector("#password")
const btn = document.querySelector("#btnSubmit")
btn.addEventListener("click", function (event) {
event.preventDefault()
if (username.value == "") {
username.classList.add("errorField")
}
if (password.value == "") {
password.classList.add("errorField")
}
})
username.addEventListener("keyup", function () {
username.classList.remove("errorField")
})
password.addEventListener("keyup", function () {
password.classList.remove("errorField")
})Vamos a explicar un poco esto:
Lo primero en lo que nos centraremos es en explicar las 3 primeras líneas de código, como puedes observar, cada línea tiene la palabra reservada const, eso es para poder definir las variables, si tienes duda, revisa este artículo, después de la palabra, el nombre que definimos para cada variable, y después del signo de igual, utilizamos algo que se denominan selectores.
Un selector es básicamente la forma en la que Javascript identifica cada uno de los componentes que creamos con HTML, para poderlos identificar, comúnmente lo hace mediante el nombre de la etiqueta, una clase o un id, en este caso, si observar, estamos anteponiendo el signo # que representa un id para HTML.
Esto quiere decir que definimos una variable username para el elemento en HTML que tiene un id username, una variable password, para el elemento en HTML que tiene un id password y una variable btn para el elemento en HTML que tiene un id btnSubmit
Observa algo interesante: el botón en HTML tiene un id btnSubmit, sin embargo, para Javascript le pusimos btn, esto es porque los podemos nombrar como queramos en cualquiera de los archivos, sin embargo, es una buena práctica que los nombremos del mismo modo para no confundirnos más adelante.
Como puedes observar, cada una de las 3 líneas tiene consigo las palabras reservadas document.querySelector, eso significa que el objeto document de Javascript tiene un método querySelector para poder obtener los selectores, entonces, recuerda: document (objeto), querySelector(método)
Por cierto, algo interesante de Javascript es que si tenemos un id en un documento HTML, podemos acceder a el mediante el nombre del ID, como si ya hubieramos definido la variable, es decir, las líneas 1, 2 y 3 en realidad no necesariamente las tendríamos que definir, pero siempre es una buena práctica 😉
De la línea 5 a la 13, le estamos añadiendo funcionalidad al botón, para hacerlo, utilizamos el método addEventListener, que recibe 2 parámetros, el primero es una cadena de texto con el evento que queremos ocupar, en este caso “click”.
El segundo parámetro, es la función en donde definimos lo que queremos hacer.
Observa que dentro de los paréntesis de la función tenemos una palabra que dice event, esto es porque cada elemento de HTML por defecto tiene una función, por ejemplo, un botón hará el envío o submit del formulario, mientras que un enlace te redireccionará a la ruta que hayas definido.
Entonces, para que estas funciones por default que tienen los elementos, no se ejecuten, cachamos el evento mediante la palabra event o en algunos casos le ponemos solo e, y en la línea 6 le decimos: event.preventDefault(), que significa, no hagas nada, la función que tenías definida, no la ejecutes.
Ahora ya viene lo bueno, de la línea 7 a la 9 pusimos una condición que dice: si el valor que tiene la variable username es vacio, entonces agrégale al elemento HTML username una clase que se llame errorField
¿Te acuerdas de errorField? sino, revisa el código CSS para que sepas que es lo que hace.
Dicho de otro modo, lo que estamos validando en esas líneas, es que el campo username no pueda estar vacío cuando le damos click al botón. Haz la prueba, inténtalo!
De la línea 10 a la 12, hacemos exactamente lo mismo, pero ahora con el campo password, ¿Recuerdas que al inicio te dije que esto no es lo mejor? Pues bueno, como puedes ver, estamos repitiendo mucho código, pero de momento está bien, ya que hayamos aprendido más, lo mejoramos.
Ahora, de la línea 15 a la 17, le estamos agregando funcionalidad al campo username, para eso utilizamos el evento keyup, el cual se detona cuando hemos pulsado una tecla y levantamos el dedo, en otra palabras, cuando hemos escrito y dejamos de escribir.
Observa que la lógica en este caso es, si escribimos en el campo, ya no estará vacío, por lo tanto, la validación del botón ya no se cumple, es por ello que ahora eliminamos del campo username la clase errorField, ¿Qué te parece?
De la línea 18 a la 20, hacemos exactamente lo mismo pero con el campo password y listo, ya tenemos una validación bastante rústica, pero haciendo uso de variables y selectores que se explicaron en el artículo anterior.
En resumen, lo importante es que aprendamos a utilizar todas las herramientas que Javascript nos ofrece, por lo que en este momento no nos preocuparemos por optimizar código o buenas prácticas, ya que más adelante te enseñaré como hacerlo, solo nos centraremos en aprender para después poder ejecutar.
Si tienes alguna duda o eres como yo, que prefiere una demostración práctica de como validar un login con Javascript, te dejo el enlace al video en donde realizo la misma actividad.
Nos vemos la próxima, te espero para poder codear juntos.
