title: Validate Multiple Input fields using JavaScript
body: <p>I would like to do the validations for multiple input fields by using JavaScript and jQuery. I am getting validations for individual fields, but the page is loading when i click submit button, so the filled data is gone.</p>
  
  <p>My Code is:
  HTML:</p>
  
  <pre><code>&lt;form id="addadmin-form" name="addadmin-form" onsubmit="return addAdminValidation123();" method="POST" class="form-horizontal"&gt;
  &lt;div class="controls"&gt;
      &lt;input name="name" id="name" type="text"/&gt;
      &lt;div id="name-error" class="validationerror"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="controls"&gt;
      &lt;input name="qualification" id="qualification" type="text"/&gt;
      &lt;div id="qualification-error" class="validationerror"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="controls"&gt;
      &lt;input name="desc" id="desc" type="text"/&gt;
      &lt;div id="desc-error" class="validationerror"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;input type="submit" class="btn btn-primary" value="Save"/&gt;
  </code></pre>
  
  <p></p>
  
  <p>JavaScript:</p>
  
  <pre><code>function addAdminValidation123(){
    $('#addadmin-form').find('input[type="text"]').each(function(){
      var id=$(this).attr("id");
      if($(this).val()=="") {
        document.getElementById(""+id+"-error").innerHTML="PLEASE FILL OUT THIS FIELD !";    
        $('#'+id+'-error').css('display','block');
        return divTagDisplayHide(5000);
      }
    });
  }
  
  function divTagDisplayHide(time){
    $(".validationerror" ).each(function(){
      var $this = $(this);
      setTimeout(function() {            
        $this.hide();
      }, time);
    });
    return false;
  }
  </code></pre>