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>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<ul>
<li>using: zxcvbn password strength library</li>
</ul>

<label>Change Password:</label><br />


<input type="text" id="changePassword" />
<button id="submitPasswordBtn">Submit</button><br />


<br />

<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 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) {

  }
  //1
  if (pwStrength.score == 1) {

  }
  //2
  if (pwStrength.score == 2) {

  }
  //3
  if (pwStrength.score == 3) {

  }
  //4
  if (pwStrength.score == 4) {

  }
}

function passwordSpace(pw) {
  var spaceVal = /\s/g
  if (!spaceVal.test(pw)) {
    $("#reserved_mark_space").html(checkMarkSvg).children("svg x_mark").remove();    
    $("#validation_space").removeClass("validation_bad").addClass("validation_good");        
  } else {
    $("#reserved_mark_space").html(xMarkSvg).children("svg check_mark").remove();    
    $("#validation_space").addClass("validation_bad").removeClass("validation_good");     ...