Dropdown password rules

Dropdown password rules. With help from https://mlitzinger.com/blog/password-validator-js/

by 8ogdan

HTML

<div id="pwd_container">
  <input type="password" id="pwd" placeholder="Password">
  <div id="pwd_rules">
    Password rules:
  </div>
</div>
<p>
  after text
</p>

CSS

input {
  font-size: 2em;
}

input:focus+#pwd_rules {
  display: block;
}

#pwd_container {
  position: relative;
  display: inline-block;
}

#pwd_rules {
  background: #ddd;
  padding: 10px;
  display: none;
  position: absolute;
  width: 100%;
}

* {
  box-sizing: border-box;
}
.rule-satisfied {
  color:green;
}
.rule-unsatisfied {
  color:red;
}

JavaScript

var password = document.getElementById('pwd');
var password_rules = document.getElementById('pwd_rules');
['focus', 'keyup'].forEach(function(e) {
  password.addEventListener(e, function() {
    console.clear();
    console.log('length: ', pattern.charLength.f(this.value), pattern.charLength.v)
    console.log('lower: ', pattern.lowercase.f(this.value), pattern.lowercase.v)
    console.log('upper: ', pattern.uppercase.f(this.value), pattern.uppercase.v)
    console.log('special:', pattern.special.f(this.value), pattern.special.v)
    $(password_rules).empty()
    $(password_rules).append('<div id="charLength">'+pattern.charLength.v+'</div>');
    $(password_rules).append('<div id="lowercase">'+pattern.lowercase.v+'</div>');
    $(password_rules).append('<div id="uppercase">'+pattern.uppercase.v+'</div>');
    $(password_rules).append('<div id="special">'+pattern.special.v+'</div>');
    
    pattern.charLength.f(this.value) ? $('#charLength').removeClass().addClass('rule-satisfied'):$('#charLength').removeClass().addClass('rule-unsatisfied') ;
    pattern.lowercase.f(this.value) ? $('#lowercase').removeClass().addClass('rule-satisfied'):$('#lowercase').removeClass().addClass('rule-unsatisfied') ;    pattern.uppercase.f(this.value) ? $('#uppercase').removeClass().addClass('rule-satisfied'):$('#uppercase').removeClass().addClass('rule-unsatisfied') ;    pattern.special.f(this.value) ? $('#special').removeClass().addClass('rule-satisfied'):$('#special').removeClass().addClass('rule-unsatisfied') ;

  }, false);
})
var pattern = {
  charLength: {
    f: function(val) {
      if (val.length >= 8) {
        return true;
      } else return false;
    },
    v: 'Must be at least eight (8) characters long'
  },
  lowercase: {
    f: function(val) {
      var regex = /^(?=.*[a-z]).+$/;
      if (regex.test(val)) {
        return true;
      } else return false;
    },
    v: 'Must contain at least one (1) lowercase letter'
  },
  uppercase: {
    f: function(val) {
     ...