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:** <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> 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; } } }); <!-- language: lang-html --> <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> <!-- end snippet --> Já que você usa Bootstrap, pode fazer a mesma coisa usando códigos jQuery. Neste caso a diferença não é muito grande: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> $(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; } } }); <!-- language: lang-html --> <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> <!-- end snippet --> > Retirei também o `type="submit"` do `button`, pois ele dentro do > formulário já é do tipo `submit`, não precisa declarar isso.