dev Sistema de confirmação de senha

[Luiiiz]

Bom ... Ontem um cara me pediu para ajuda-lo com relação a isso. Mesmo sem entender muito de javascript, resolvi ajuda-lo. Hoje intrigado com isso, resolvi fazer o sistema da minha forma. Para ver o funcionamento: https://codepen.io/Luiiiiz/pen/jKoyBQ

 

HTML

 

<form name="form">
    <div id="error">
        <p id="errorM"></p>
    </div>
    
    <label for="name">Nome</label>
    <input type="text" name="name" id="name" required>
 
    <label for="senha">Senha</label>
    <input type="password" name="senha" id="senha" required>    
    
    <label for="csenha">Confirmar Senha</label>
    <input type="password" name="csenha" id="csenha" required onfocusout="validatePass()">
    
    <button type="submit" class="btn" id="btn" disabled>Enviar</button>
</form>

 

CSS

 

form {
    width: 500px;
    height: auto;
    padding: 20px 20px;
    background: #353b48;
    margin: 100px auto;
    border-radius: 3px;
}
 
    form:after {
        content: "";
        display: flex;
        clear: both;
    }
 
form label,
form input {
    display: block;
}
 
form label {
    color: #fff;
    font-family: "Arial", sans-serif;
    font-weight: 600;
    font-size: 10pt;
    line-height: 1.5;
    text-transform: uppercase;
}
 
form input {
    width: 100%;
    height: 25px;
    border: none;
    border-radius: 3px;
    margin: 10px 0;
    padding: 0 3px;
}
 
.btn {
    background-color: #4cd137;
    border: none;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    padding: 10px 15px;
    border-radius: 3px;
    margin: 10px 0 0 0;
    float: right;
    cursor: pointer;
    box-sizing: border-box;
}
 
.btn[disabled] {
    opacity: .5;
}
 
#error {
    width: 100%;
    padding: 3px 10px;
    margin: 10px 0 20px 0;
    box-sizing: border-box;
    color: #fff;
    font-family: "Arial", sans-serif;
    font-weight: 600;
    font-size: 10pt;
    text-transform: uppercase;
    text-align: center;
    display: none;
}

 

JS

 

function validatePass() {
 
    var pass = document.form.senha.value;
    var cpass = document.form.csenha.value;
    var error = document.getElementById("error");
    
    if (pass != cpass) {
        // Deixa visivel a mensagem de erro
        error.style.display = "block";
        // Deixa o botão enviar desabilitado
        document.getElementById("btn").disabled = true;
        
            // Seta valor null para as os inputs
            document.form.senha.value = null;
            document.form.csenha.value = null;
        
            // Foca no input senha após detectar erro
            document.form.senha.focus();
        
        // Estilo do background, borda e mensagem
        document.getElementById("errorM").innerHTML = "Senhas não estão parecidas";
        document.getElementById("error").style.backgroundColor = "#e84118";
        document.getElementById("error").style.borderBottom = "2px solid #c23616";
    } else {
        // Deixa visivel a mensagem de erro
        error.style.display = "block";
        // Deixa o botão enviar habilitado
        document.getElementById("btn").disabled = false;
        
        // Estilo do background, borda e mensagem
        document.getElementById("errorM").innerHTML = "Senhas estão parecidas";
        document.getElementById("error").style.backgroundColor = "#4cd137";
        document.getElementById("error").style.borderBottom = "2px solid #44bd32";
        
    
    }
 
}

[SnowRunescape]

Lembre-se de verificar se as senhas são iguais no server-side... no php ou onde você esteja programando... pois no javascript isso é facilmente quebrado...

[Luiiiz]

 

Lembre-se de verificar se as senhas são iguais no server-side... no php ou onde você esteja programando... pois no javascript isso é facilmente quebrado...

 

 

Opa, obrigado pela dica. Sou amador ainda e quando estiver uma experiência com back-end(O qual devo saber no máximo o básico de PHP) eu lembrarei sim