Jquery Bootstrap 4 password strength meter

user_3736954 0
Viewed 2712

I would like to replicate the strength meter like the following using bootstrap Jquery and CSS only. As in the given example is done using angular JS. I'm an absolute beginner to jQuery hence seeking assistance.

Original Link Link

My JSFiddle Link

<form>
    <div class="form-group">
        <input type="email" class="form-control" placeholder="Email" autofocus required>
    </div>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Username">
    </div>
    <div class="form-group form-row">
        <div class="col">
            <input type="password" class="form-control" placeholder="Password">
        </div>
        <div class="col">
            <input type="password" class="form-control" placeholder="Confirm Password">
        </div>

        <div class="sign__forms__password__strength">
            <div class="strength__meter__fill">

            </div>
        </div>


    </div>
</form>
css html jquery
2 Answers

Below is an example of password strength meter u can refer this code.

HTML PAGE

$.strength = function(element, password) {
  var desc = [{
    'width': '0px'
  }, {
    'width': '20%'
  }, {
    'width': '40%'
  }, {
    'width': '60%'
  }, {
    'width': '80%'
  }, {
    'width': '100%'
  }];
  var descClass = ['', 'progress-bar-danger', 'progress-bar-danger', 'progress-bar-warning', 'progress-bar-success', 'progress-bar-success'];
  var score = 0;

  if (password.length > 6) {
    score++;
  }

  if ((password.match(/[a-z]/)) && (password.match(/[A-Z]/))) {
    score++;
  }

  if (password.match(/\d+/)) {
    score++;
  }

  if (password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)) {
    score++;
  }

  if (password.length > 10) {
    score++;
  }

  element.removeClass(descClass[score - 1]).addClass(descClass[score]).css(desc[score]);
};

$(function() {
  $("#pwd").keyup(function() {
    $.strength($("#progress-bar"), $(this).val());
  });
});
form {
  max-width: 400px;
  padding: 1em;
}

*:focus {
  outline-style: none;
}

input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 6px;
  border: 1px solid #ddd;
}

#progress {
  height: 20px;
  width: 100%;
  margin-top: 0.6em;
}

#progress-bar {
  width: 0%;
  height: 100%;
  transition: width 500ms linear;
}

.progress-bar-danger {
  background: #d00;
}

.progress-bar-warning {
  background: #f50;
}

.progress-bar-success {
  background: #080;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div>
    <input type="password" id="pwd" placeholder="Password" autocomplete="off">
    <div id="progress">
      <div id="progress-bar"></div>
    </div>
  </div>
</form>

user_43905900

Assuming we put another class name in your password input tag named "pwsd" and add another division for the result like your original link right after the input tag for password that we should store the result, assuming the class named "the_result"

 $('.pswd').on('keyup', function(e){
     var count = e.target.value.length;
    if(parseFloat(count) >= 7){
       $('.the_result').html('7+')
    }
    else{
     $('.the_result').html(parseFloat(count))
    }
 })
user_52670470
Related