My scenario is as follows, I have a form and in it I need to do a password validation that must contain: At least 6 characters, At least 1 uppercase letter, At least 1 number.
This validation I can do, however I have below the password field 3 bullets that need to be filled in sequentially when each of the password requirements are filled in.
Here's 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>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"});
}
Unsuccessful, any help?