Counter.js

var counter = function(e, nb = 50, inverse = false) {
    var span = e.nextSibling.nextSibling
    var parent = e.parentNode.parentNode
    if (inverse == false) {
        
        span.innerText = e.value.length + '/' + nb + ' caractères restant'
        
        
        if (e.value.length > nb || e.value.length == 0) {
            parent.classList.add('has-error')
            parent.classList.remove('has-success')
        } else {
            parent.classList.remove('has-error')
            parent.classList.add('has-success')
        }
    } else {
        span.innerText = e.value.length + '/' + nb + ' caractères requis'
        
        if (e.value.length < nb) {
            parent.classList.add('has-error')
            parent.classList.remove('has-success')
        } else {
            parent.classList.remove('has-error')
            parent.classList.add('has-success')
        }
    }
}

gistfile1.txt

<style>
.has-error .help-block { color: #dc3545 !important; }
.has-success .help-block { color: #28a745 !important; }
</style>

<div class="form-group">
  <label>Pseudo</label>
  <div class="col">
    <input type="text" onKeyUp="counter(this, 100)">
    <span class="help-block"></span>
  </div>
</div>

<div class="form-group">
  <label>Password</label>
  <div class="col">
    <input type="password" onKeyUp="counter(this, 8, true)">
    <span class="help-block"></span>
  </div>
</div>