You could create a p tag and append those errors as suggested i.e. characters length should be less then 5, as below, I have even made few correction in conditions.

var textbox = document.getElementById("username");
var pr = document.createElement("p");
function nm(){
	if(textbox.value.length >= 1 && textbox.value.length <= 5){
  pr.textContent = "min 5 characters";
  document.body.appendChild(pr);
  }
  else if(textbox.value.length === 0){
  pr.textContent = "nama pengguna must inputed";
  document.body.appendChild(pr);  
  }
}
textbox.addEventListener("blur",nm);

p{
  color:red;
}

<div class="form-group required2">
  <label class="control-label visible-ie8 visible-ie9">Nama Pengguna</label>
  <div class="input-icon">
    <i class="fa fa-user"></i>

    <input id="username" class="form-control placeholder-no-fix" pattern=".{5,}" type="text" autocomplete="off" placeholder="Nama Pengguna" name="username" required title="nama pengguna must inputed (min 5 characters)" />
  </div>
</div>

If you want to change your message accordingly, you will be battling against HTML5 validation, but that won’t be too big a problem.

What you need to do is to check the value when the data has changed.

Put the following into your stattup code:

document.querySelector('input#username').onchange=function() {
    checkLength();
}

By startup code, I mean whatever you use to start your script. Tuypically it is something like:

document.addEventListener('DOMContentLoad',init,false);
function init() {

}

or, for older browsers,

window.onload=init;

If you want convert alert into simple text message then follow the code below.

HTML

<div class="form-group required2">
        <label class="control-label visible-ie8 visible-ie9">Nama Pengguna</label>
        <div class="input-icon">
            <i class="fa fa-user"></i>

            <input id="username" class="form-control placeholder-no-fix" pattern=".{5,}" type="text" autocomplete="off" placeholder="Nama Pengguna" name="username" required title="nama pengguna must inputed (min 5 characters)" />
<span class="username_error" class="error"></span>
</div>  
    </div>

Javascript

<script>
    function checkLength(){
        var textbox = document.getElementById("username");
        if(textbox.value.length <= 5){
            document.getElementById('username_error').innerHTML = "min 5 characters";
        }
        else(textbox.value.length == 0){
            document.getElementById('username_error').innerHTML = "nama pengguna must inputed";
        }
    }
</script>

CSS

<style>
.error{
  color:"red";
}
</style>