JSFiddle - React, Tailwind, and code Playground

by dhavaljani

HTML

<form>
	<label for="password">Password</label>
	<input class="password" name="password" type="password" />

	<ul class="helper-text">
		<li class="length">Must be at least 8 characters long.</li>
		<li class="lowercase">Must contain a lowercase letter.</li>
		<li class="uppercase">Must contain an uppercase letter.</li>
		<li class="special">Must contain a number or special character.</li>
	</ul>
</form>

SCSS

body {
  background: #e8e8e8;
  font: 400 14px/1 Arial, sans-serif;
  color: #454545;
  
  * {
    box-sizing: border-box;
  }
  
  *:focus { outline: 0; }
}

form {
  position: absolute;
  top:0; bottom:0; left:0; right:0;
  max-width: 320px;
  width: auto;
  height: 224px;
  margin: auto;
  padding: 32px;
  background: #ffffff;
  box-shadow: 0px 2px 4px -2px #cccccc;
  
  label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
  }
  
  input[type="password"] {
    display: block;
		//width: 100%;
    height: 36px;
    margin-bottom: 8px;
    padding: 0 36px 0 10px;
    border: 2px solid #cccccc;
    font-size: 16px;
    letter-spacing: 1px;
  }

  
  ul.helper-text {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 22px;
    color: #808080;
    padding-left: none;
    li {
      list-style: none;
      margin-left: -40px;
      margin-right: 10px;
    }
    li.valid {
      color: #1fd34a;
    }
    li.valid::before {
      content: "✓ ";
    }
     
  }
  
  /*
  &.valid {
    input { border: 2px solid #1fd34a; }
  }
*/
  
}

JavaScript

(function(){
	var password = document.querySelector('.password');
	
	var helperText = {
		charLength: document.querySelector('.helper-text .length'),
		lowercase: document.querySelector('.helper-text .lowercase'),
		uppercase: document.querySelector('.helper-text .uppercase'),
		special: document.querySelector('.helper-text .special')
	};
	
	var pattern = {
		charLength: function() {
			if( password.value.length >= 8 ) {
				return true;
			}
		},
		lowercase: function() {
			var regex = /^(?=.*[a-z]).+$/; // Lowercase character pattern

			if( regex.test(password.value) ) {
				return true;
			}
		},
		uppercase: function() {
			var regex = /^(?=.*[A-Z]).+$/; // Uppercase character pattern

			if( regex.test(password.value) ) {
				return true;
			}
		},
		special: function() {
			var regex = /^(?=.*[0-9_\W]).+$/; // Special character or number pattern

			if( regex.test(password.value) ) {
				return true;
			}
		}   
	};
	
	// Listen for keyup action on password field
  password.addEventListener('keyup', function (){
		// Check that password is a minimum of 8 characters
		patternTest( pattern.charLength(), helperText.charLength );
		
		// Check that password contains a lowercase letter		
		patternTest( pattern.lowercase(), helperText.lowercase );
		
		// Check that password contains an uppercase letter
		patternTest( pattern.uppercase(), helperText.uppercase );
		
		// Check that password contains a number or special character
		patternTest( pattern.special(), helperText.special );
    
    // Check that all requirements are fulfilled
    if( hasClass(helperText.charLength, 'valid') &&
			  hasClass(helperText.lowercase, 'valid') && 
			 	hasClass(helperText.uppercase, 'valid') && 
			  hasClass(helperText.special, 'valid')
		) {
			addClass(password.parentElement, 'valid');
    }
    else {
      removeClass(password.parentElement, 'valid');
    }
	});
	
	function patternTest(pattern, response) {
		if(pattern) {
      addClass(response, 'valid');
    }
   ...