Match Password case in jQuery

by Faisal Khan Janjua

HTML

<form>
<div><input type="text" /></div>
<div>test<br>TEST<br>test1<br>TEST1<br>12345678<br>Test123<br>!@#$%<br>Abcd@1234</div>
<button type="submit" disabled>Submit</button>
</form>

CSS

input + span.error {
    color: #F00;
    display: block;
    font-size: 11px;
    margin-top: 4px;
    line-height: 12px;
}
input + span.error ul li { white-space: nowrap; }

JavaScript

var passwordText = {
  'chars': '<li>must be at least 8 characters long.</li>',
  'digit': '<li>must have at least 1 number.</li>',
  'upper': '<li>must have at least 1 uppercase letter.</li>',
  'lower': '<li>must have at least 1 lowercase letter.</li>',
  'spchr': '<li>must have at least 1 special character.</li>'
};
var passwordCases = { 'chars': true, 'digit': true, 'upper': true, 'lower': true, 'spchr': true };
var passwordError = '<span class="error">Please meet password criteria:<ul></ul></span>';


$(document).on('input', 'input', function(){
	var that = $(this);
	that.next('.error').remove();
	var digit = new RegExp("^(?=.*\\d).+$");
	var upper = new RegExp("^(?=.*[A-Z]).+$");
	var lower = new RegExp("^(?=.*[a-z]).+$");
	var spchr = new RegExp("^(?=.*\\W).+$");
  
  passwordCases.chars = that.val().length >= 8 ? true : false;
  passwordCases.digit = digit.test(that.val()) ? true : false;
  passwordCases.upper = upper.test(that.val()) ? true : false;
  passwordCases.lower = lower.test(that.val()) ? true : false;
  passwordCases.spchr = spchr.test(that.val()) ? true : false;
  
  var hasError = false;
  Object.keys(passwordCases).forEach(function(k) {
  	if(passwordCases[k] === false) { hasError = true; }
  });
  if(hasError){
  	that.closest('form').find('[type="submit"]').attr('disabled','disabled');
  	that.after(passwordError);
    Object.keys(passwordCases).forEach(function(k) {
      if(passwordCases[k] === false) {
        that.next().find('ul').append(passwordText[k]);
      }
    });
  }
  else {
  	that.closest('form').find('[type="submit"]').removeAttr('disabled');
  }
  
});