Password validation with jQuery in steps

Question

My scenario is the following, I have a form and in it I need to do a password validation that needs to contain: At least 6 characters, At least 1 uppercase letter, At least 1 number.

This validation I can do, but I have below the password field 3 Bullets that need to be completed sequentially when each of the password requirements are fulfilled.

This is my code:

$("input[type=password]").keyup(function(){
    var ucase = new RegExp("[A-Z]+");
    var lcase = new RegExp("[a-z]+");
    var num   = new RegExp("[0-9]+");

    if($("#password1").val().length >= 6){
      $(".6char").removeClass("glyphicon-remove");
      $(".6char").addClass("glyphicon-ok");
      $(".6char-text").css({"color": "#1FE6A8" });
      $(".6char-bg").css({"background-color": "#1FE6A8"});
    }else{
      $(".6char").removeClass("glyphicon-ok");
      $(".6char").addClass("glyphicon-remove");
      $(".6char").css("color","#F79682");
    }

    if(ucase.test($("#password1").val())){
      $(".ucase").removeClass("glyphicon-remove");
      $(".ucase").addClass("glyphicon-ok");
      $(".ucase").css("color","#1FE6A8");
      $(".ucase-text").css({"color": "#1FE6A8" });
      $(".ucase-bg").css({"background-color": "#1FE6A8"});
    }else{
      $(".ucase").removeClass("glyphicon-ok");
      $(".ucase").addClass("glyphicon-remove");
      $(".ucase").css("color","#F79682");
    }

    if(num.test($("#password1").val())){
      $(".num").removeClass("glyphicon-remove");
      $(".num").addClass("glyphicon-ok");
      $(".num").css("color","#1FE6A8");
      $(".num-text").css({"color": "#1FE6A8" });
      $(".num-bg").css({"background-color": "#1FE6A8"});
    }else{
      $(".num").removeClass("glyphicon-ok");
      $(".num").addClass("glyphicon-remove");
      $(".num").css("color","#F79682");
    }
  });

@import "//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css";
@import "//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";

html, body {
  height: 100%;
}

body {
  background-color: #E5E5E5;
}

.wrapper-box {
  background-color: white;
  padding-bottom: 48px;
  padding-top: 60px;
}

.wrapper-box__title {
  color: #312F4F;
  font-size: 22px;
  margin-bottom: 37px;
  padding-top: 24px;
}

.form {
  /* padding: 0 65px; */
}

.form input[type=text],
.form input[type=password] {
  border: 1px solid #B6B9D0;
  border-radius: 0;
  box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.05);
  padding: .57rem .75rem;
}

.form-newaccount label {
  /*font-family: 'Soleil Regular';*/
}

.form-newaccount__bullet-steps {
  margin-bottom: 13px;
  margin-top: 8px;
}

.btn {
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

.btn-green {
  background-color: #17D499;
  color: white;
  font-size: 18px;
  font-weight: bold;
  padding: .775rem .75rem;
  width: 100%;
}

.bullet-pass-hor {
  background-color: #EAEAF4;
  border-radius: 10px;
  height: 8px;
  width: 100%;
}

.bullet-pass-rounded {
  color: #696D8C;
  display: inline-block;
  font-size: 16px;
}
.bullet-pass-rounded .fa {
  color: #EAEAF4;
  font-size: 10px;
  height: 16px;
  vertical-align: middle;
  width: 10px;
}

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="container h-100">
    <div class="row h-100 justify-content-center align-items-center">
      <div class="col-sm-6 wrapper-box">
        <p class="wrapper-box__title text-center">Crie sua conta</p>
        <div>
          <form method="post" class="form form-newaccount" id="passwordForm">
            <div class="form-group">
              <label for="">Nome completo</label>
              <input type="text" class="form-control" placeholder="">
            </div>
            <div class="form-group">
              <label for="">E-mail</label>
              <input type="text" class="form-control" placeholder="">
            </div>
            <div class="form-group">
              <label for="">Senha</label>
              <input type="password" class="input-lg form-control" name="password1" id="password1" placeholder="" autocomplete="off">
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-newaccount__bullet-steps d-flex flex-row">
                    <div class=" 6char-bg bullet-pass-hor"><span class=""></span></div>
                    <div class=" ucase-bg bullet-pass-hor"><span class=""></span></div>
                    <div class=" num-bg bullet-pass-hor"><span class=""></span></div>
                  </div>
                </div>
                <div class="col-sm-12">
                  <span id="" class="d-block bullet-pass-rounded" style="color:;"><span class="fa fa-circle 6char 6char-text" aria-hidden="true"></span> Pelo menos 6 caracteres</span>
                  <span id="" class="d-block bullet-pass-rounded" style="color:;"><span class="fa fa-circle ucase ucase-text" aria-hidden="true"></span> Pelo menos 1 letra maiúscula</span>
                  <span id="" class="d-block bullet-pass-rounded" style="color:;"><span class="fa fa-circle num num-text" aria-hidden="true"></span> Pelo menos 1 número</span>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="">Confirme sua senha</label>
              <input type="password" class="input-lg form-control" name="password2" id="password2" placeholder="" autocomplete="off">
            </div>
            <input type="submit" class="btn btn-green" data-loading-text="Criar conta..." value="Criar conta">
          </form>
        </div>
      </div>
    </div>
  </div>

Jsfiddle

I tried to create something like this:

var steps = $('bullet-pass-hor');
var index = 0;

function addClass() {
  if($("#password1").val().length >= 6 || ucase.test($("#password1").val()) || num.test($("#password1").val()) == steps.length) return;
  steps.eq(index++).css({"background-color": "#1FE6A8"});
}

Without success, some help?

Answer 1

There are 3 incorrect things in the code.

1. That your condition num.test($("#password1").val()) == steps.length will always be fake, this is because you forgot to add the point when will capture the steps. The correct is: var steps = $('.bullet-pass-hor');. Even so, this condition will only be true when the user only enters the number 3. (Valor da senha == o número de elementos ".bullet-pass-hor")

2. You are creating a function within another function. It is not necessary to do this.

3. You are using $(".6char-bg").css({"background-color": "#1FE6A8"}); in conditions, this causes the "Bullets" not to function sequentially.

Follows corrected code.

https://jsfiddle.net/valdeirpsr/nvfgoa9d/5/