3

Meu cenário é o seguinte, eu tenho um formulário e nele preciso fazer uma validação de password que precisa conter: Pelo menos 6 caracteres, Pelo menos 1 letra maiúscula, Pelo menos 1 número.

Essa validação eu consigo fazer, porém eu tenho embaixo do campo password 3 bullets que precisam ser preenchidos sequencialmente quando cada um dos requisitos do password forem preenchidos.

Esse é meu código:

$("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

Tentei criar algo assim:

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

Sem sucesso, alguma ajuda?

1 Resposta 1

0

Há 3 coisas incorretas no código.

  1. Essa sua condição num.test($("#password1").val()) == steps.length sempre será falsa, isso porque você esqueceu de adicionar o ponto quando vai capturar os steps. O correto é: var steps = $('.bullet-pass-hor');. Mesmo assim, essa condição só será verdadeira quando o usuário digitar apenas o número 3. (Valor da senha == o número de elementos ".bullet-pass-hor")

  2. Você está criando uma função dentro de outra função. Não é necessário fazer isso.

  3. Você está utilizando $(".6char-bg").css({"background-color": "#1FE6A8"}); nas condições, isso faz com que os "bullets" não funcionem de forma sequencial.

Segue código corrigido.

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

1
  • Falta de atenção esses pontos que levantou. Agradeço e estou aceitando sua resposta para resolver essa questão.
    – codajoao
    Commented 5/01/2018 às 15:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .