JSFiddle - React, Tailwind, and code Playground

by Dru Dro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="form-group">
    <label for="">Label</label>
    <form action=""><input type="password" class="form-control" pattern="(?=^.{8,50}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" required></form>
  </div>
  <div class="row form-group">
    <div class="col-xs-6">
      <ul class="list-requirement">
        <li class="completed">Completed example</li>
        <li data-pattern="^(?=.*[a-z]).+$">One lowercase character</li>
        <li data-pattern="^(?=.*[A-Z]).+$">One uppercase character</li>
        <li data-pattern="^(?=.*[\d]).+$">One numeric character</li>
      </ul>
    </div>
    <div class="col-xs-6">
      <ul class="list-requirement">
        <li data-pattern="([-+=_!@#$%^&*.,;:'\&#34;<>/?`~\[\]\(\)\{\}\\\|\s])">One special character</li>
        <li data-pattern="^.{8,}">8 characters minimum</li>
        <li class="plus-50 text-danger" style="display: none;">50 characters max</li>
      </ul>
    </div>
  </div>
</div>

CSS

.list-requirement {
  font-size: 13px;
}

.list-requirement li {
  list-style: none;
  transition: opacity .25s ease-in-out 0s;
}

.list-requirement li:before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-bottom: 1px;
  margin-right: 6px;
  background: #EE3F0E;
  border-radius: 50%;
}

.list-requirement li.completed {
  opacity: 0.5;
}

.list-requirement li.completed::before {
  background: #d0d0d0;
}

JavaScript

// Password Requirements
// At least one LOWERCASE character:
var lowerCasePattern = /^(?=.*[a-z]).+$/;
// At least one UPPERCASE character:
var upperCasePattern = /^(?=.*[A-Z]).+$/;
// At least one NUMBER:
var numberPattern = /^(?=.*[\d]).+$/;
// At least one SPECIAL character:
var specialCharacterPatter = /([-+=_!@#$%^&*.,;:'\"<>/?`~\[\]\(\)\{\}\\\|\s])/;
// At least 8 characters in the screen:
var characterCountPattern = /^.{8,}/;
// Flag to keep track if password is less than 50 characters:
var isLessThan50 = true;

$("input[type='password']").on("input", function() {
  var val = this.value;


  var dataList = $("[data-pattern]");
  for (var i = 0; i < dataList.length; i++) {
    var pattern = new RegExp($(dataList[i]).attr('data-pattern'), "g");
    if (pattern.test(val)) {
      $(dataList[i]).addClass("completed");
    } else {
      $(dataList[i]).removeClass("completed");
    }
    console.log(pattern, $(dataList[i]));

  }



  /* if (upperCasePattern.test(val)) {
    $(".list-requirement .uppercase-char").addClass("completed");
  } else {
    $(".list-requirement .uppercase-char").removeClass("completed");
  } */

});