how to set focus on an input field when an error occurred during the form submission
<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>