You can validate using Regular Expressions , where:
/.{6,}/ → 6 caracteres ou mais
/[A-Z]{1,}/ → 1 letra maiúscula ou mais
/[0-9]{1,}/ → 1 número ou mais
I just modified it in your HTML by placing the sentences within each div and changing the background color according to the criteria met by the expressions above.
I used a oninput event to listen when something is typed in the password field. This event will call the val() function that will validate the password.
I also used a onsubmit event that will detect when it is attempted to submit it. This event will also query the val() function, which will return true if the password is valid and equal to the confirmar_senha , or false field, otherwise. Returning false will not send the form.
See how it went:
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><formaction="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>
Since you use Bootstrap, you can do the same thing using jQuery codes. In this case the difference is not too great:
$(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><formaction="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>
I also removed the type="submit" from button , because it within
form is already type submit , you do not need to declare it.
