如何在表单提交期间发生错误时将焦点设置在输入字段上

时间：2016-01-08 09:28:30

标签： javascript html forms

1。我正在创建表单验证一切正常，但是在表单提交期间发生错误时，应该关注该字段。 2。是一条错误消息。我正在使用 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";
    }
}

2 个答案:

答案 0 :(得分：1)

您应该使用 focus() 功能，请查看下面的工作示例。

希望这有帮助。

  {  
    "id":5,
    "title":"Interstellar",
    "release_date":"2014-11-06",
    "image":"/nBNZadXqJSdt05SHLqgT0HuC5Gm.jpg",
    "user_id":null,
    "created_at":"2016-01-08T09:22:39.120Z",
    "updated_at":"2016-01-08T09:22:39.120Z",
    "movie_id":"157336",
    "backdrop":"/xu9zaAevzQ5nnrsXN6JcahLnG4i.jpg",
    "crew":null,
    "cast":null,
    "trailers":[  
      {  
        "id":8,
        "movie_id":"157336",
        "link":"ePbKGoIGAXY"
      },
      {  
        "id":9,
        "movie_id":"157336",
        "link":"KlyknsTJk0w"
      },
      {  
        "id":10,
        "movie_id":"157336",
        "link":"nyc6RJEEe0U"
      },
      {  
        "id":11,
        "movie_id":"157336",
        "link":"Lm8p5rlrSkY"
      },
      {  
        "id":12,
        "movie_id":"157336",
        "link":"zSWdZVtXT7E"
      }
    ]
  }

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 === "") {
    resetErrorMsg();

    document.getElementById('f_error_msg').innerHTML = "Please enter Full Name";
    document.registration.name.focus();
    document.getElementById('f_error_msg').style.display = "block";
    return false;
}else{
    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) {
    resetErrorMsg();

    document.getElementById('e_error_msg').innerHTML = "Please enter a valid e-mail address \n atpostion:" + atposition + "\n dotposition:" + dotposition;
    
    document.registration.email.focus();
    document.getElementById('e_error_msg').style.display = "block";
    return false;
}else{
    document.getElementById('e_error_msg').style.display = "none";
}

if (company === null || company === "") {
    resetErrorMsg();

    document.getElementById('c_error_msg').innerHTML = "Please enter your company name";
    document.registration.company.focus();
    document.getElementById('c_error_msg').style.display = "block";
    return false;
}else{
    document.getElementById('c_error_msg').style.display = "none";
}

if (project === null || project === "") {
    resetErrorMsg();

    document.getElementById('p_error_msg').innerHTML = "Please enter your project name";
    document.registration.project.focus();
    document.getElementById('p_error_msg').style.display = "block";
    return false;
} else{
    document.getElementById('p_error_msg').style.display = "none";
}

if (message === null || message === "") {
    resetErrorMsg();
    
    document.getElementById('m_error_msg').innerHTML = "Please enter your message here.";
    document.registration.message.focus();
    document.getElementById('m_error_msg').style.display = "block";
    return false;
} else{
    document.getElementById('m_error_msg').style.display = "none";
}

}

function resetErrorMsg(){
document.getElementById('f_error_msg').style.display = "none";
document.getElementById('e_error_msg').style.display = "none";
document.getElementById('c_error_msg').style.display = "none";
document.getElementById('p_error_msg').style.display = "none";
document.getElementById('m_error_msg').style.display = "none";
}

答案 1 :(得分：0)

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

2016.01.08 09:27:28 ERROR web[rails] Can not render widget rules: undefined   method `strftime' for nil:NilClass
2016.01.08 09:27:28 ERROR web[rails]   compiled-template:20:in `_run_inline_1764444193_locals_dashboard_configuration_widget_widget_properties'
2016.01.08 09:27:28 ERROR web[rails]   org/jruby/RubyKernel.java:2227:in `send'
2016.01.08 09:27:28 ERROR web[rails]   /apps/eqbld/sonar/sonarqube-5.2/web/WEB-INF/gems/gems/actionpack-2.3.15/lib/action_view/renderable.rb:34:in `render'
2016.01.08 09:27:28 ERROR web[rails]   /apps/eqbld/sonar/sonarqube-5.2/web/WEB-INF/gems/gems/actionpack-2.3.15/lib/action_view/base.rb:306:in `with_template'
2016.01.08 09:27:28 ERROR web[rails]   /apps/eqbld/sonar/sonarqube-5.2/web/WEB-INF/gems/gems/actionpack-2.3.15/lib/action_view/renderable.rb:30:in `render'
2016.01.08 09:27:28 ERROR web[rails]   /apps/eqbld/sonar/sonarqube-5.2/web/WEB-INF/gems/gems/actionpack-2.3.15/lib/action_view/base.rb:269:in `render'
2016.01.08 09:27:28 ERROR web[rails]   /apps/eqbld/sonar/sonarqube-5.2/web/WEB-INF/app/helpers/dashboard_helper.rb:168:in `widget_body'
2016.01.08 09:27:28 ERROR web[rails]   /apps/eqbld/sonar/sonarqube-5.2/web/WEB-INF/app/views/dashboard/_widget.html.erb:3:in `_run_erb_app47views47dashboard47_widget46html46erb_locals_object_widget'
2016.01.08 09:27:28 ERROR web[rails]   org/jruby/RubyKernel.java:2227:in `send'
....

如果名称字段有错误。

对于跨度空间问题，最初使用display：none，当您收到错误时，请指定display：inline表示该特定错误范围。

相关问题
最新问题