Nube Colectiva – Productos y Servicios Digitales

Como Verificar si 2 Contraseñas Coinciden o son Iguales con JavaScript

wbadmin

Demo Github

Personalmente creo que la validación del lado del servidor es más segura y es en donde debemos enfocar nuestra atención a la hora de verificar los datos, sobre todo si son contraseñas, pero en algunas ocasiones necesitamos hacer la validación en la vista el usuario, en este tutorial te enseñaré como hacerlo con JavaScript.

Antes de continuar te invito a leer los siguientes artículos:

Y también te invito a escuchar el Podcast: “Si No Tienes Experiencia Para Un Puesto De Trabajo, Créala !”:

Spotify SoundCloud

Bien ahora continuemos con el Post: Como Leer un archivo JSON en Android (Android Studio 3.6.1 + Java) – Parte 2 (Final) 
En JavaScript existen muchas formas de validar la igualdad de las contraseñas, yo te compartiré una manera.

Vista HTML

Antes del formulario voy mostrar los mensajes de validación, agrego 3 elementos un div con id msg, en este div mostraremos los mensajes de validación. Debajo colocaré 2 mensajes de validación, les he colocado el nombre de clase ocultar para que no se vean a primera vista. 

<div id="msg"></div>

<!-- Mensajes de Verificación -->
<div id="error" class="alert alert-danger ocultar" role="alert">
    Las Contraseñas no coinciden, vuelve a intentar !
</div>
<div id="ok" class="alert alert-success ocultar" role="alert">
    Las Contraseñas coinciden ! (Procesando formulario ... )
</div>
<!-- Fin Mensajes de Verificación -->

Mi formulario va estas compuesto de 3 campos: nombre, pass1 y pass2, estos 2 últimos son los campos que validaré. 

Cuando presionamos el botón para procesar el formulario, este llama a la función JavaScript  verificarPasswords() que se encarga de validar la igualdad de las contraseñas. 

<form id="miformulario" onsubmit="verificarPasswords(); return false">
    <div class="form-group">
        <label for="usuario">Usuario</label>
        <input type="text" class="form-control" id="usuario" value="usuariogenial" required>
    </div>
    <div class="form-group">
        <label for="pass1">Contraseña</label>
        <input type="password" class="form-control" id="pass1" required>
    </div>
    <div class="form-group">
        <label for="pass2">Vuelve a escribir la Contraseña</label>
        <input type="password" class="form-control" id="pass2" required>
    </div>

    <button type="submit" id="login" class="btn btn-primary">Login</button>
</form>

Para la vista estoy usando Bootstrap 4, ahora pasemos a ver los estilos CSS.

Estilos CSS

Los mensajes de validación usarán las siguientes clases CSS, estas las uso para ocultar y mostrar los mensajes cuando es necesario. 

.ocultar {
    display: none;
}

.mostrar {
    display: block;
}

Por defecto los mensajes de validación usan la clase ocultar, pero si es necesario mostrarse uno de estos mensajes, pues le aplicamos la clase mostrar con JavaScript, veamos mejor como trabajan las clases CSS en el código JavaScript. 

JavaScript

En el formulario al presionar el botón para procesar el formulario llamamos a la función verificarPasswords(), entonces creamos esta función. 

function verificarPasswords() {

    // Acá va el código 

}

Lo primero que hago es obtener los valores de los campos pass1 y pass2.

// Ontenemos los valores de los campos de contraseñas 
pass1 = document.getElementById('pass1');
pass2 = document.getElementById('pass2');

Luego mediante el uso de sentencias if – else realizo la validación (En el código he colocado comentarios, para explicar que hace cada porción de código). 

// Verificamos si las constraseñas no coinciden
if (pass1.value != pass2.value) {

    // Si las constraseñas no coinciden mostramos un mensaje
    document.getElementById("error").classList.add("mostrar");

    return false;
}

else {

    // Si las contraseñas coinciden ocultamos el mensaje de error
    document.getElementById("error").classList.remove("mostrar");

    // Mostramos un mensaje mencionando que las Contraseñas coinciden
    document.getElementById("ok").classList.remove("ocultar");

    // Desabilitamos el botón de login
    document.getElementById("login").disabled = true;

    // Refrescamos la página (Simulación de envío del formulario)
    setTimeout(function() {
    location.reload();
    }, 3000);

    return true;
}

A continuación el código completo de la función verificarPasswords() 

function verificarPasswords() {

    // Ontenemos los valores de los campos de contraseñas 
    pass1 = document.getElementById('pass1');
    pass2 = document.getElementById('pass2');

    // Verificamos si las constraseñas no coinciden 
    if (pass1.value != pass2.value) {

        // Si las constraseñas no coinciden mostramos un mensaje 
        document.getElementById("error").classList.add("mostrar");

        return false;
    } else {

        // Si las contraseñas coinciden ocultamos el mensaje de error
        document.getElementById("error").classList.remove("mostrar");

        // Mostramos un mensaje mencionando que las Contraseñas coinciden 
        document.getElementById("ok").classList.remove("ocultar");

        // Desabilitamos el botón de login 
        document.getElementById("login").disabled = true;

        // Refrescamos la página (Simulación de envío del formulario) 
        setTimeout(function() {
            location.reload();
        }, 3000);

        return true;
    }

}

Por ejemplo si las contraseñas no son iguales, mostramos el mensaje correspondiente.

Y si las contraseñas coinciden o son iguales, mostramos el mensaje Las Contraseñas coinciden ! (Procesando formulario … ) 

Al inicio de este tutorial, he colocado una Demo y el repositorio GitHub con el código fuente. 

Conclusión

La validación del lado del cliente ayuda a mejorar la experiencia del usuario, pero siempre es bueno hacer una validación de los datos en el lado del servidor, sobre todo si son contraseñas. 

Nota(s)

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos. 

Exit mobile version