在表单中单击“提交”按钮时，请关注空字段

focus on empty field when submit button is clicked in form

本文关键字：字段 按钮 表单 单击 提交      更新时间：2024-05-30

这是我的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";
    }

我正在尝试这个-当点击提交按钮时，它会检查空字段。如果空字段可用，则必须将名称文本框作为焦点。上面的代码实际上集中了字段，但页面立即被加载，并且值被重置。我不想加载页面。提前感谢！

检查方法返回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()">

添加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;
    }
}

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

相关文章：