JSFiddle - React, Tailwind, and code Playground

by Riivr

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>
<label>Change Password:</label><br />
<input type="text" id="changePassword" />
<button id="submitPasswordBtn">Submit</button><br />

<br />
<div id="passwordStrengthContainer">
  <div class="progress">
    <div id="strengthBar" class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="0" style="width: 0%">
    </div>
  </div>
</div>


<div class="validation_checks hidden"> <!-- hidden --> 

  <div id="spaceValidation">
    <span id="reserved_mark_space"></span>
    <label id="validation_space">No Spaces</label>
  </div>

  <div id="lengthValidation">
  <span id="reserved_mark_length"></span>
    <label id="validation_length">Minimum Length of 6 Characters</label>
  </div>

  <div id="upperValidation">
  <span id="reserved_mark_upper"></span>
    <label id="validation_upper">Requires One Upper Case Letter</label>
    </div>
  
  <div id="lowerValidation">
    <span id="reserved_mark_lower"></span>   
    <label id="validation_lower">Requires One Lower Case Letter</label>
  </div>

  <div id="digitValidation">    
  <span id="reserved_mark_digit"></span>
    <label id="validation_digit">Requires One Number</label>
  </div>

  <div id="symbolValidation">    
    <span id="reserved_mark_symbol"></span>
    <label id="validation_symbol">Requires One Symbol [ ! &#64; # $ % ^ & * etc... ]</label>
  </div>

</div>

CSS

.validation_good {
  color: #00FF00;
}

.validation_bad {
  color: #FF0000;
}

.hidden {
  display: none;
}

.progress {
  width: 20%;
}

JavaScript

var $bar = $('#strengthBar');
var barIncrement = 0;
var checkMarkSvg = "<svg class=\"check_mark\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"#00FF00\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"><path d=\"M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z\"/></svg>"
var xMarkSvg =     "<svg class=\"x_mark\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"#FF0000\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"><path d=\"M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z\"/></svg>"


$("#submitPasswordBtn").on('click', function() {
  var pw = $("#changePassword").val();  
  var rgx = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9_ ])(?!.*\s).{6,}/g;
  var result = rgx.test(pw);
  alert(result);
  // if true run password save ajax to backend     
});

$("#changePassword").on('focus', function() {
  $('.validation_checks').removeClass("hidden");  
  $("#passwordStrength").removeClass("hidden");
  validatedPassword = 0;
});

$("#changePassword").on('keyup change', function() {
  var pw = $("#changePassword").val();
  passwordSpace(pw);
  passwordStrengthBar(pw);
  passwordLength(pw);
  passwordUpper(pw);
  passwordLower(pw);
  passwordDigit(pw);
  passwordSymbol(pw);
  
});

function passwordStrengthBar(pw) {
	var pwStrength = zxcvbn(pw);
  //0
  if (pwStrength.score == 0 || pwStrength == null) {
    barIncrement = 0;
    $bar.css('width', barIncrement + '%')
    	.addClass('progress-bar-danger')
    	.removeClass('progress-bar-warning progress-bar-info progress-bar-success')
    	.text('');
  }
  //1
  if (pwStrength.score == 1) {
    barIncrement = 25;
    $bar.css('width', barIncrement + '%')
    		.attr('aria-valuenow', barIncrement)
    		.addClass('progress-bar-danger')
    		.removeClass('progress-bar-warning progress-bar-info progress-bar-success')
    		.text('Weak');
  }
  //2
  if (pwStrength.score == 2) {
    barIncrement = 50;
   ...