Pode validar usando Expressões Regulares, onde:
/.{6,}/ → 6 caracteres ou mais
/[A-Z]{1,}/ → 1 letra maiúscula ou mais
/[0-9]{1,}/ → 1 número ou mais
Só modifiquei no seu HTML colocando as frases dentro de cada div
e alterando a cor de fundo de acordo com os critérios atendidos pelas expressões acima.
Utilizei um evento oninput
para escutar quando algo é digitado no campo senha. Esse evento irá chamar a função val()
que irá validar a senha.
Utilizei também um evento onsubmit
que irá detectar quando for tentado submetê-lo. Esse evento também irá consultar a função val()
, que retornará true
caso a senha seja válida e igual ao campo confirmar_senha
, ou false
, caso contrário. Se retornar false
o formulário não será enviado.
Veja como ficou:
document.addEventListener("DOMContentLoaded", function(){
document.forms[0].onsubmit = function(e){
return val(e);
}
senha.oninput = function(e){
val(e);
}
function val(e){
var passo, passo1, passo2,
v = senha.value,
cor = "#fff",
e = e.type == "submit";
// verifica se tem 6 caracteres ou mais
if(v.match(/.{6,}/)){
barra.style.backgroundColor = "#FFFEB5";
passo = true;
}else{
barra.style.backgroundColor = cor;
passo = false;
}
// verifica se tem ao menos uma letra maiúscula
if(v.match(/[A-Z]{1,}/)){
barra_1.style.backgroundColor = "#FFD27E";
passo1 = true;
}else{
barra_1.style.backgroundColor = cor;
passo1 = false;
}
// verifica de tem ao menus um número
if(v.match(/[0-9]{1,}/)){
barra_2.style.backgroundColor = "#D8FFCD";
passo2 = true;
}else{
barra_2.style.backgroundColor = cor;
passo2 = false;
}
// o formulário só será enviado pelo evento submit
// e todos os passos devem ser verdadeiros para validar
if(passo && passo1 && passo2 && v == confirma_senha.value && e){
alert("Senha ok!");
return true;
}else if(e){
alert("Senha inválida ou não conferem");
return false;
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="pagina.php">
<div class="form-group">
<label for="exampleInputEmail1">E-mail</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="email">
</div>
<div class="form-group">
<label for="senha">Senha</label>
<input type="password" class="form-control" id="senha"></br>
<div class="row" id="barras">
<div id="barra" class="col-md-3">Pelo menos 6 caracteres</div>
<div id="barra_1" class="col-md-3">Pelo menos 1 letra maiúscula</div>
<div id="barra_2" class="col-md-3">Pelo menos 1 número</div>
</div>
</div>
<div class="form-group">
<label for="confirma_senha">Confirme sua senha</label>
<input type="password" class="form-control" id="confirma_senha">
</div>
<button class="btn btn-primary">Cadastrar</button>
</form>
Já que você usa Bootstrap, pode fazer a mesma coisa usando códigos jQuery. Neste caso a diferença não é muito grande:
$(document).ready(function(){
$("form").submit(function(e){
return val(e);
});
$(senha).on("input", function(e){
val(e);
});
function val(e){
var passo, passo1, passo2,
v = senha.value,
cor = "#fff", // cor padrão das divs
e = e.type == "submit";
// verifica se tem 6 caracteres ou mais
if(v.match(/.{6,}/)){
$(barra).css("background-color", "#FFFEB5");
passo = true;
}else{
$(barra).css("background-color", cor);
passo = false;
}
// verifica se tem ao menos uma letra maiúscula
if(v.match(/[A-Z]{1,}/)){
$(barra_1).css("background-color", "#FFD27E");
passo1 = true;
}else{
$(barra_1).css("background-color", cor);
passo1 = false;
}
// verifica de tem ao menus um número
if(v.match(/[0-9]{1,}/)){
$(barra_2).css("background-color", "#D8FFCD");
passo2 = true;
}else{
$(barra_2).css("background-color", cor);
passo2 = false;
}
// o formulário só será enviado pelo evento submit
// e todos os passos devem ser verdadeiros para validar
if(passo && passo1 && passo2 && v == $(confirma_senha).val() && e){
alert("Senha ok!");
return true;
}else if(e){
alert("Senha inválida ou não conferem");
return false;
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="pagina.php">
<div class="form-group">
<label for="exampleInputEmail1">E-mail</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="email">
</div>
<div class="form-group">
<label for="senha">Senha</label>
<input type="password" class="form-control" id="senha"></br>
<div class="row" id="barras">
<div id="barra" class="col-md-3">Pelo menos 6 caracteres</div>
<div id="barra_1" class="col-md-3">Pelo menos 1 letra maiúscula</div>
<div id="barra_2" class="col-md-3">Pelo menos 1 número</div>
</div>
</div>
<div class="form-group">
<label for="confirma_senha">Confirme sua senha</label>
<input type="password" class="form-control" id="confirma_senha">
</div>
<button class="btn btn-primary">Cadastrar</button>
</form>
Retirei também o type="submit"
do button
, pois ele dentro do
formulário já é do tipo submit
, não precisa declarar isso.