Javascript 当表单提交过程中发生错误时，如何在输入字段上设置焦点

1。我正在创建一个表单验证，一切正常，但是当表单提交过程中出现错误时，应该将重点放在该字段上。 2.问题是一条错误消息。我使用span来显示错误消息，但在加载页面时，span也会在输入字段下方留出一些空间，从而导致错误。如何在页面加载时隐藏它，如果我们没有填充任何字段，则显示错误消息

这是我的密码：

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";
    }
}

函数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；
如果（全名===null | |全名===“”）{
document.getElementById（'f_error_msg'）.innerHTML=“请输入全名”；
fullname.focus（）；
返回false；
document.getElementById（'f_error\u msg'）.style.display=“无”；
} 
var atposition=emailadd.indexOf（“@”）；
var dotposition=emailadd.lastIndexOf（“.”）；
if（atposition<1 | | dotposition=emailadd.length）{
document.getElementById（'e_error_msg'）。innerHTML=“请输入有效的电子邮件地址\n atposition:”+atposition+“\n dotposition:”+dotposition；
emailadd.focus（）；
返回false；
document.getElementById（'e_error_msg'）.style.display=“无”；
} 
如果（公司===null | |公司===“”）{
document.getElementById（'c_error_msg'）.innerHTML=“请输入您的公司名称”；
company.focus（）；
返回false；
document.getElementById（'c_error_msg'）.style.display=“无”；
} 
如果（项目===null | |项目===“”）{
document.getElementById（'p_error_msg'）.innerHTML=“请输入您的项目名称”；
project.focus（）；
返回false；
document.getElementById（'p_error_msg'）.style.display=“无”；
} 
如果（消息===null | |消息===“”）{
document.getElementById（'m_error_msg'）。innerHTML=“请在此处输入您的消息。”；
message.focus（）；
返回false；
document.getElementById（'m_error_msg'）.style.display=“无”；
}
}

要设置焦点，您可以使用：

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

如果名称字段有错误

对于span space问题，最初使用display:none，当您收到错误时，为该特定错误span指定display:inline。

您应该使用函数，检查下面的工作示例

希望这有帮助

---

函数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；
如果（全名===null | |全名===“”）{
resetErrorMsg（）；
document.getElementById（'f_error_msg'）.innerHTML=“请输入全名”；
document.registration.name.focus（）；
document.getElementById（'f_error\u msg'）.style.display=“block”；
返回false；
}否则{
document.getElementById（'f_error\u msg'）.style.display=“无”；
}
var atposition=emailadd.indexOf（“@”）；
var dotposition=emailadd.lastIndexOf（“.”）；
if（atposition<1 | | dotposition=emailadd.length）{
resetErrorMsg（）；
document.getElementById（'e_error_msg'）。innerHTML=“请输入有效的电子邮件地址\n atposition:”+atposition+“\n dotposition:”+dotposition；
document.registration.email.focus（）；
document.getElementById（'e_error_msg'）.style.display=“block”；
返回false；
}否则{
document.getElementById（'e_error_msg'）.style.display=“无”；
}
如果（公司===null | |公司===“”）{
resetErrorMsg（）；
document.getElementById（'c_error_msg'）.innerHTML=“请输入您的公司名称”；
document.registration.company.focus（）；
document.getElementById（'c_error_msg'）.style.display=“block”；
返回false；
}否则{
document.getElementById（'c_error_msg'）.style.display=“无”；
}
如果（项目===null | |项目===“”）{
resetErrorMsg（）；
document.getElementById（'p_error_msg'）.innerHTML=“请输入您的项目名称”；
document.registration.project.focus（）；
document.getElementById（'p_error_msg'）.style.display=“block”；
返回false；
}否则{
document.getElementById（'p_error_msg'）.style.display=“无”；
}
如果（消息===null | |消息===“”）{
resetErrorMsg（）；
document.getElementById（'m_error_msg'）。innerHTML=“请在此处输入您的消息。”；
document.registration.message.focus（）；
document.getElementById（'m_error_msg'）.style.display=“block”；
返回false；
}否则{
document.getElementById（'m_error_msg'）.style.display=“无”；
}
}
函数resetErrorMsg（）{
document.getElementById（'f_error\u msg'）.style.display=“无”；
document.getElementById（'e_error_msg'）.style.display=“无”；
document.getElementById（'c_error_msg'）.style.display=“无”；
document.getElementById（'p_error_msg'）.style.display=“无”；
document.getElementById（'m_err