Los formularios son uno de los componentes más importantes en un proyecto web, pues nos permiten interactuar con los datos del usuario. Sobre un formulario de registro, aquel que le permite al usuario crear una cuenta, se pueden ejecutar muchísimas acciones. En este post, te enseñaremos cómo validar contraseñas en un formulario de registro para poder crear un nuevo usuario.
¿Cómo validar contraseñas en un formulario de registro?
Validar contraseñas en un formulario de registro es un ejercicio fundamental en el desarrollo web, pues nos permite validar ciertos aspectos de la contraseña que ha creado un usuario. Una de las validaciones que podemos hacer es revisar si la contraseña y la repetición de la contraseña es la misma. A continuación, te enseñaremos cómo hacer esto.
Para validar contraseñas en un formulario de registro deberemos ejecutar una lógica de JavaScript sobre un nodo del DOM (normalmente la etiqueta form). Por ello, podríamos ejecutar este ejercicio en un archivo de controlador. Ahora, esta lógica debe ejecutarse en un momento determinado: cuando se hace el envío del formulario. Por ello, usaremos el evento submit de JavaScript.
A continuación, te mostramos la función que hemos creado dentro de nuestro controlador para declarar la lógica anterior, que será ejecutada en el segundo parámetro del método addEventListener.
onSubmitForm ( ) {
this.formElement.addEventListener («submit», (event) => {
event.preventDefault ( );
// Aquí ejecutaremos la lógica
}
}
Ahora, el primer pedazo de lógica que deberemos ejecutar para validar contraseñas en un formulario de registro y sus parámetros será obtener los valores de estas contraseñas. Para ello, podríamos seleccionar los input de contraseñas y traernos el valor del value o usar el objeto FormData en JavaScript.
A continuación, te mostramos cómo hemos obtenido los valores de nuestras contraseñas usando los nombres dados a sus input en nuestro post sobre crear un formulario de registro en HTML. Para ello, este nombre se pasa como parámetro de un comando formData.get.
const username = formData.get (‘textInput’);
const passwordInput = formData.get (‘passwordInput’);
const passwordMatchInput = formData.get (‘passwordMatchInput’);
Ahora que hemos obtenido estos datos, el siguiente paso para validar contraseñas en un formulario de registro es ejecutar la lógica. Hablando en términos fuera de código, esta lógica define que el contenido del input de contraseña debe ser igual al del input de repetir contraseña.
Para ejecutar la lógica anterior, crearemos una nueva función que nos comunique esta acción. Nosotros hemos decidido llamarla checkIfPasswordsAreEqual. Esta función recibirá las constantes declaradas anteriormente y las comparará con un operador ===.
A continuación te mostramos las líneas de código finales de esta función:
checkIfPasswordsAreEqual (passwordInput, passwordMatchInput) {
return passwordInput === passwordMatchInput
}
)
Ahora, podemos pasar esta función pequeña y superlegible por el segundo parámetro del método addEventListener. Con esto, ejecutaremos la lógica necesaria para validar contraseñas en un formulario de registro usando un condicional if. Esto nos permitirá ejecutar reacciones, tanto para el caso de que las contraseñas sean iguales, como para el caso de que no lo sean.
Por último, te mostramos las líneas de código finales de nuestra función onSubmitForm:
onSubmitForm ( ) {
this.formElement.addEventListener («submit», (event) => {
event.preventDefault ( );
const username = formData.get (‘textInput’);
const passwordInput = formData.get (‘passwordInput’);
const passwordMatchInput = formData.get (‘passwordMatchInput’);
const arePasswordsEqual = this.checkIfPasswordsAreEqual (passwordInput, passwordMatchInput)
if (!arePasswordsEqual) {
pubSub.publish (
publish.TOPICS.SHOW_ERROR_NOTIFICATION,
«las contraseñas no son iguales»
);
}
});
}
Con las líneas de código anteriores, hemos definido una constante arePasswordsEqual, por donde pasamos la función creada para hacer esta validación. Luego, usando un if, hemos definido que, si esta constante nos da false, ejecutaremos un mensaje de alerta.
Para ejecutar el mensaje de alerta anterior, hemos utilizado un patrón llamado PubSub. Puedes aprender más sobre aplicar este patrón en nuestros posts sobre emitir y escuchar mensajes con PubSub, implementar patrón PubSub con clase en JavaScript y controlar mensajes con PubSub.
¿Cuál es el siguiente paso?
Ahora que sabes cómo validar contraseñas en un formulario de registro, ¡ha llegado el momento de desarrollar y controlar tus propios formularios de registro! Para ello, el siguiente paso es inscribirte a nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás a desarrollar tus propias líneas de código y proyectos web con diferentes lenguajes y herramientas que te darán las habilidades necesarias para destacar en el mercado laboral IT. ¿A qué esperas para convertirte en un desarrollador web profesional y cambiar tu vida? ¡Inscríbete ya!
