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

时间:2015-02-26 17:35:34

标签: javascript html forms

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

尝试此操作 - 单击提交按钮时,它会检查空字段。如果空字段可用,则必须将名称文本框的焦点对齐。 上面的代码实际上集中了该字段,但页面立即被加载并且值被重置。我不希望页面加载。提前谢谢!

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

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

答案 2 :(得分:0)

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