title: How to alert under input text with conditions?
body: <p><a href="https://i.stack.imgur.com/npKYP.png" rel="nofollow noreferrer">Please look the picture here</a></p>
  
  <p><a href="https://i.stack.imgur.com/npKYP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/npKYP.png" alt="enter image description here"></a></p>
  
  <p>want to divided the alert. So when value is empty or null, the alert is <strong>nama pengguna must inputed</strong>. And if value is less then 5, the alert is <strong>min 5 characters</strong>.</p>
  
  <p>For the style is only like it (red text, under input text). I mean not use javascript alert.</p>
  
  <p>This is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function checkLength() {
   var textbox = document.getElementById("username");
   if(textbox.value.length &lt;= 5) {
    alert("min 5 characters");
   }
   else if(textbox.value.length == 0){
    alert("nama pengguna must inputed")
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="form-group required2"&gt;
   &lt;label class="control-label visible-ie8 visible-ie9"&gt;Nama Pengguna&lt;/label&gt;
   &lt;div class="input-icon"&gt;
     &lt;i class="fa fa-user"&gt;&lt;/i&gt;
    &lt;input id="username" class="form-control placeholder-no-fix" pattern=".{5,}" type="text" autocomplete="off" placeholder="Nama Pengguna" name="username" onchange="checkLength()" required title="nama pengguna must inputed (min 5 characters)"&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks.</p>