在表单中单击提交按钮时关注空字段答案

【问题标题】：focus on empty field when submit button is clicked in form在表单中单击提交按钮时关注空字段
【发布时间】：2015-02-27 04:39:40
【问题描述】：

这是我的html代码

<section class="main">
<form class="form-2" name="form1" id="form1" method="POST" onsubmit="check()">
    <input type="text" id="name" name="name" placeholder="Your Name" >
    <input type="text" id="username" name="username" placeholder="Username" >
    <input type="text" id="mail" name="mail" placeholder="E-mail id" >
    <input type="text" id="phone" name="phone" placeholder="Mobile Number"  >
    <input type="password" id="pass1" name="pass1" placeholder="Password" >
    <input type="password" id="pass2" name="pass2" placeholder="Re-type Password" >
    <button type="submit" name="submit" ></button>                      
</form>
</section>

我的javascript：

function check () {
    var name = document.getElementById('name').value;
    var mail = document.getElementById('mail').value;
    var numb = document.getElementById('phone').value;
    var pass1 = document.getElementById('pass1').value;
    var pass2 = document.getElementById('pass2').value;

    if((name == "") && (mail == "") && (numb == "") && (pass1 == "") && (pass2 == ""))
    {
        alert("Make sure that you've entered all the details :(");
        document.getElementById('name').focus();
    }
    else
    {
        document.getElementById("form1").action = "register_2step_1.php";
    }

我正在尝试这个 - 当单击提交按钮时，它会检查空字段。如果空字段可用，它必须聚焦名称文本框。上面的代码实际上关注了该字段，但页面会立即加载并且值会被重置。我不希望页面加载。提前致谢！

【问题讨论】：

需要拦截并拦截submit方法，返回false。

标签： javascript html forms

【解决方案1】：

从检查方法返回 false

if((name == "") && (mail == "") && (numb == "") && (pass1 == "") && (pass2 == ""))
    {
        alert("Make sure that you've entered all the details :(");
        document.getElementById('name').focus();
        return false;
    }
    else
    {
        document.getElementById("form1").action = "register_2step_1.php";
      return true;
    }

更新：

<form onsubmit="return check()">

【讨论】：

感谢您的回答。但这似乎不起作用。问题仍然存在。

【解决方案2】：

在 HTML 中添加

<form class="form-2" name="form1" id="form1" method="POST" onsubmit="DoSubmit();">
<input type="hidden" name="message" value="0" />
<input type="text" name="message" value="" />
 <input type="hidden" name="submit" value="0" />
<input type="submit" name="submit" value="" />
 <input type="hidden" name="name" value="0" />
<input type="text" id="name" name="name" value=""placeholder="Your Name" >
 <input type="hidden" name="username" value="0" />
<input type="text" id="username" name="username" value=""placeholder="Username" >
 <input type="hidden" name="mail" value="0" />
<input type="text" id="mail" name="mail"value="" placeholder="E-mail id" >
 <input type="hidden" name="phone" value="0" />
<input type="text" id="phone" name="phone"value="" placeholder="Mobile Number"  >
 <input type="hidden" name="pass1" value="0" />
<input type="password" id="pass1" name="pass1"value="" placeholder="Password" >
 <input type="hidden" name="pass2" value="0" />
<input type="password" id="pass2" name="pass2"value="" placeholder="Re-type Password" >
</form>

然后在JS中

function DoSubmit(){
    if((name == "") && (mail == "") && (numb == "") && (pass1 == "") && (pass2 == ""))
    {
            alert("Make sure that you've entered all the details :(");
            document.getElementById('name').focus();
            return false;
    }
    else
    {
            document.getElementById("form1").action = "register_2step_1.php";
         document.form1.message.value = '1';
         document.form1.submit.value = '1';
         document.form1.name.value = '1';
         document.form1.username.value = '1';
         document.form1.mail.value = '1';
         document.form1.phone.value = '1';
         document.form1.pass1.value = '1';
         document.form1.pass2.value = '1';
          return true;
    }
}

【讨论】：

不！这没有用。当我给出任何一个字段时，动作就会被触发。
我的意思是这样......现在检查......可能需要一些小调试来查看它

【解决方案3】：

将onsubmit="check()" 更改为onsubmit("check();return false")

【讨论】：

您是否建议使用内联事件处理程序？不应该是onclick="..."吗？
我的错误，不要更改 onsubmit，因为它会在表单提交时触发。例如，onclick 不起作用。有人点击enter 键。