how to set focus on an input field when an error occurred during the form submission

Question

1. I am creating a form validation everything fine, but when an error occurred during the form submission it should be focused on that field. 2. thing is an error message. I am using span 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.

Here is my code:

HTML

<form name="registration" id="form" action="contact.php" method="post" onsubmit="return validateform();">
        <div class="form-group">
            <div class="input-group col-xs-12 text-left">
                <label for="InputName">Full Name:<span style="color:red;">*</span></label>
                <input type="text" name="name" id="name" class="form-control" placeholder="Name">
                <br>
                <span id="f_error_msg"></span>
            </div>
            <div class="input-group col-xs-12 text-left">
                <label for="InputEmail">Email Address:<span style="color:red;">*</span></label>
                <input type="email" name="email" id="email" class="form-control" placeholder="Email">
                <br>
                <span id="e_error_msg"></span>
            </div>
            <div class="input-group col-xs-12 text-left">
                <label for="InputCompany">Company:<span style="color:red;">*</span></label>
                <input type="text" name="company" id="company" class="form-control" placeholder="Company">
                <br>
                <span id="c_error_msg"></span>
            </div>
            <div class="input-group col-xs-12 text-left">
                <label for="ProjectDescription">Project Description:<span style="color:red;">*</span></label>
                <input name="project" id="project" type="text" class="form-control" placeholder="Project Description">
                <br>
                <span id="p_error_msg"></span>
            </div>
            <div class="input-group col-xs-12 text-left">
                <label for="InputMessage">Message:<span style="color:red;">*</span></label>
                <input type="text" name="message" id="message" class="form-control" placeholder="I love a team that...">
                <br>
                <span id="m_error_msg"></span>
            </div>
        </div>
        <div class="form-group">
            <input type="submit" name="submit" class="btn btn-success btn-block" value="Go">
        </div>
    </form>

JavaScript

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 < 1 || dotposition < atposition + 2 || dotposition + 2 >= 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";
    }
}

Answer 1

To set focus you can use:

document.getElementById('name').focus();

If name field has an error.

For span space issue, use display:none initially and when you get the error specify display:inline for that particular error span.