Password validation with jQuery in steps


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 capital letter, At least 1 number.

I can do this validation, but I have 3 bullets under the password field that need to be filled in sequentially when each of the password requirements is fulfilled.

This is my code:

    var ucase = new RegExp("[A-Z]+");
    var lcase = new RegExp("[a-z]+");
    var num   = new RegExp("[0-9]+");

    if($("#password1").val().length >= 6){
      $(".6char-text").css({"color": "#1FE6A8" });
      $(".6char-bg").css({"background-color": "#1FE6A8"});

      $(".ucase-text").css({"color": "#1FE6A8" });
      $(".ucase-bg").css({"background-color": "#1FE6A8"});

      $(".num-text").css({"color": "#1FE6A8" });
      $(".num-bg").css({"background-color": "#1FE6A8"});
@import "//";
@import "//";

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="//"></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>
          <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 class="form-group">
              <label for="">E-mail</label>
              <input type="text" class="form-control" placeholder="">
            <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 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 class="form-group">
              <label for="">Confirme sua senha</label>
              <input type="password" class="input-lg form-control" name="password2" id="password2" placeholder="" autocomplete="off">
            <input type="submit" class="btn btn-green" data-loading-text="Criar conta..." value="Criar conta">


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"});

No success, any help?


There are 3 things incorrect in the code.

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

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

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

Corrected code follows.

Scroll to Top