JSFiddle - React, Tailwind, and code Playground

by Marcelo Martins

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="login-form">
  <h3 class="h3-header text-center">Account Login</h3>
  <div class="container-fluid">
    <form action="/action_page.php">

      <input type="text" id="usrname" name="usrname" placeholder="Username or Email" required />

      <div id="password-requirements">
        <h3 class="h3-header">Password Requirements</h3>
        <div id="capital" class="invalid">Contain one uppercase letter (A-Z)</div>
        <div id="letter" class="invalid">Contain one lowercase letter (a-z)</div>
        <div id="number" class="invalid">Contain one number (0-9)</div>
        <div id="length" class="invalid">Be between 8 and 19 characters long</div>
      </div>

      <div class="clearfix pt8"></div>

      <input type="password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" placeholder="Password" required />

      <div class="registrationFormAlert text-center" id="divCheckPasswordMatch"></div>
      <div class="input-group">
        <input type="password" id="matchpsw" name="matchpsw" class="form-control reenterpassword" placeholder="Re-enter Password" required />
        <span id="matchpswstatus" class="input-group-addon"><i class="fa fa-times"></i></span>
      </div>

      <div class="clearfix pt8"></div>
      <hr />
      <div class="text-center">
        <input type="submit" class="btn btn-success btn-md" value="Submit">
      </div>
      <div class="clearfix pt8"></div>
    </form>
  </div>
</div>

CSS

/* Style all input fields */

div#login-form {
  border: solid 1px #ddd;
  border-radius: 6px;
  margin: 10px !important;
}

input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
}

/* Style the submit button */

h3.h3-header {
  text-align: center;
  padding: 0 10px 10px 10px;
  border-bottom: solid 1px #f1f1f1;
}

.pt8 {
  padding-top: 8px !important;
  clear: both
}

.p8 {
  padding: 8px !important;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
}

/* Style the container for inputs */

.container {
  background-color: #fff;
  padding: 20px;
}

/* The password requirements box is shown when the user clicks on the password field */

#password-requirements {
  display: block;
  background: #fff;
  color: #000;
  position: relative;
  padding: 10px;
  margin-top: 1px;
}

#password-requirements div {
  padding: 1px 35px;
  font-size: 15px;
}

/* Add a green text color and a checkmark when the requirements are right */

.valid {
  color: green;
}

.valid:before {
  position: relative;
  left: -10px;
  content: "✔";
}

/* Add a red text color and an "x" when the requirements are wrong */

.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -10px;
  content: "✖";
}

input.reenterpassword {
  height: 50px;
  margin-top: 0px;
}

JavaScript

var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");

// When the user clicks on the password field, show the password-requirements box
myInput.onfocus = function() {
  document.getElementById("password-requirements").style.display = "block";
}

// When the user clicks outside of the password field, hide the password-requirements box
myInput.onblur = function() {
  document.getElementById("password-requirements").style.display = "block";
}

// When the user starts to type something inside the password field
myInput.onkeyup = function() {
  // Validate lowercase letters
  var lowerCaseLetters = /[a-z]/g;
  if (myInput.value.match(lowerCaseLetters)) {
    letter.classList.remove("invalid");
    letter.classList.add("valid");
  } else {
    letter.classList.remove("valid");
    letter.classList.add("invalid");
  }

  // Validate capital letters
  var upperCaseLetters = /[A-Z]/g;
  if (myInput.value.match(upperCaseLetters)) {
    capital.classList.remove("invalid");
    capital.classList.add("valid");
  } else {
    capital.classList.remove("valid");
    capital.classList.add("invalid");
  }

  // Validate numbers
  var numbers = /[0-9]/g;
  if (myInput.value.match(numbers)) {
    number.classList.remove("invalid");
    number.classList.add("valid");
  } else {
    number.classList.remove("valid");
    number.classList.add("invalid");
  }

  // Validate length
  if (myInput.value.length >= 8) {
    length.classList.remove("invalid");
    length.classList.add("valid");
  } else {
    length.classList.remove("valid");
    length.classList.add("invalid");
  }
}

$(function() {
  $("#matchpsw").keyup(function() {
    var password = $("#psw").val();
    $("#divCheckPasswordMatch").html(password == $(this).val() ? "Passwords match." : "Passwords do not match!");
  });
});