title: how to set focus on an input field when an error occurred during the form submission
body: <p><strong>1.</strong> I am creating a form validation everything fine, but when an error occurred during the form submission it should be focused on that field. 
  <strong>2.</strong> thing is an error message. I am using <strong>span</strong> for showing error message, but when page loaded span also making some space below the input field that is making a distorted. how to hide it when the page loaded and if we don't fill any field show error message show.</p>
  
  <p>Here is my code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form name="registration" id="form" action="contact.php" method="post" onsubmit="return validateform();"&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="input-group col-xs-12 text-left"&gt;
                  &lt;label for="InputName"&gt;Full Name:&lt;span style="color:red;"&gt;*&lt;/span&gt;&lt;/label&gt;
                  &lt;input type="text" name="name" id="name" class="form-control" placeholder="Name"&gt;
                  &lt;br&gt;
                  &lt;span id="f_error_msg"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="input-group col-xs-12 text-left"&gt;
                  &lt;label for="InputEmail"&gt;Email Address:&lt;span style="color:red;"&gt;*&lt;/span&gt;&lt;/label&gt;
                  &lt;input type="email" name="email" id="email" class="form-control" placeholder="Email"&gt;
                  &lt;br&gt;
                  &lt;span id="e_error_msg"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="input-group col-xs-12 text-left"&gt;
                  &lt;label for="InputCompany"&gt;Company:&lt;span style="color:red;"&gt;*&lt;/span&gt;&lt;/label&gt;
                  &lt;input type="text" name="company" id="company" class="form-control" placeholder="Company"&gt;
                  &lt;br&gt;
                  &lt;span id="c_error_msg"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="input-group col-xs-12 text-left"&gt;
                  &lt;label for="ProjectDescription"&gt;Project Description:&lt;span style="color:red;"&gt;*&lt;/span&gt;&lt;/label&gt;
                  &lt;input name="project" id="project" type="text" class="form-control" placeholder="Project Description"&gt;
                  &lt;br&gt;
                  &lt;span id="p_error_msg"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="input-group col-xs-12 text-left"&gt;
                  &lt;label for="InputMessage"&gt;Message:&lt;span style="color:red;"&gt;*&lt;/span&gt;&lt;/label&gt;
                  &lt;input type="text" name="message" id="message" class="form-control" placeholder="I love a team that..."&gt;
                  &lt;br&gt;
                  &lt;span id="m_error_msg"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;input type="submit" name="submit" class="btn btn-success btn-block" value="Go"&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>function validateform() {
      var fullname = document.registration.name.value;
      var emailadd = document.registration.email.value;
      var company = document.registration.company.value;
      var project = document.registration.project.value;
      var message = document.registration.message.value;
  
      if (fullname === null || fullname === "") {
          document.getElementById('f_error_msg').innerHTML = "Please enter Full Name";
          fullname.focus();
          return false;
          document.getElementById('f_error_msg').style.display = "none";
      } 
  
      var atposition = emailadd.indexOf("@");
      var dotposition = emailadd.lastIndexOf(".");
      if (atposition &lt; 1 || dotposition &lt; atposition + 2 || dotposition + 2 &gt;= emailadd.length) {
          document.getElementById('e_error_msg').innerHTML = "Please enter a valid e-mail address \n atpostion:" + atposition + "\n dotposition:" + dotposition;
          emailadd.focus();
          return false;
          document.getElementById('e_error_msg').style.display = "none";
      } 
  
      if (company === null || company === "") {
          document.getElementById('c_error_msg').innerHTML = "Please enter your company name";
          company.focus();
          return false;
          document.getElementById('c_error_msg').style.display = "none";
      } 
      if (project === null || project === "") {
          document.getElementById('p_error_msg').innerHTML = "Please enter your project name";
          project.focus();
          return false;
          document.getElementById('p_error_msg').style.display = "none";
      } 
      if (message === null || message === "") {
          document.getElementById('m_error_msg').innerHTML = "Please enter your message here.";
          message.focus();
          return false;
          document.getElementById('m_error_msg').style.display = "none";
      }
  }
  </code></pre>