0

我正在尝试使用 JavaScript 验证表单，但如果表单未验证，我不希望将表单发送到“操作”页面。

验证者：

<script>
    function formSubmit()
    {
    document.getElementById("signup_form").submit();
    var x=document.forms["signup_form"]["tname"].value;
    if (x==null || x=="")
      {
      alert("First name must be filled out");
      return false;
      }
    }
</script>

表格本身：

<form action="some_file.php" method="post" id="signup_form" name="signup_form" onsubmit="return formSubmit()">

但这所做的只是如果 tname 字段为空，它将返回警报，但一旦用户点击确定，表单就会重定向到 some_file.php。我在这里错过了什么？

提交按钮：

<a href="" onclick="return formSubmit(); return false" class="purplebutton">Signup</a>

那么我错过了什么？我将来如何避免这种情况？

4

7 回答 7

3

你有错误的执行语句。您在验证之前提交表单。将此语句移到 if 语句下方

document.getElementById("signup_form").submit();

更进一步。你formSubmit()在两个地方打电话，form标记和a标记一次就可以了。

更新代码：

<html>
<head>
    <title></title>
    <script>
    function formSubmit()
    {

    var x=document.forms["signup_form"]["tname"].value;
    if (x==null || x=="")
      {
      alert("First name must be filled out");
      return false;
      }
      document.getElementById("signup_form").submit();
    }
</script>
</head>
<body>
    <form action="some_file.php" method="post" id="signup_form" name="signup_form" onsubmit="return formSubmit()">
        <input type="text" name="tname" />
        <a href="" onclick="return formSubmit(); return false" class="purplebutton">Signup</a>
</body>
</html>

演示

于 2012-12-02T04:57:52.663 回答
1

在你的函数中删除这一行

 document.getElementById("signup_form").submit();

并在if条件后添加

或者像下面这样重写函数

function formSubmit()
    {
    var x=document.forms["signup_form"]["tname"].value;
    if (x==null || x=="")
      {
      alert("First name must be filled out");
      return false;
      }else
         return true;
    }
于 2012-12-02T04:57:58.700 回答
1

你的程序流程有问题。
在提交表单之前进行验证。
提交后验证没有用，我认为你错误地做到了。验证后提交即可。

于 2012-12-02T05:00:01.680 回答
1

尝试：

function formSubmit() {

    var x=document.forms["signup_form"]["tname"].value;
    if (x==null || x=="")
      {
      alert("First name must be filled out");
      return false;
    }
   else {
      return true;
   }
}
于 2012-12-02T05:00:50.837 回答
1

你已经有了所有的代码。这是因为执行错误。

<script>
    function formSubmit()
    {
        var x=document.forms["signup_form"]["tname"].value;
        if (!x){
              alert("First name must be filled out");
              return false;
        }
        return true;
    }
</script>


<form action="some_file.php" method="post" id="signup_form" name="signup_form">
<a href="" onclick="return formSubmit();" class="purplebutton">Signup</a>
于 2012-12-02T05:03:07.120 回答
1

试试这个：

function formSubmit()
{
    var x=document.forms["signup_form"]["tname"].value;
    if (x=="")
    {
         alert("First name must be filled out");
         return false;
    }
    return true;
}

*对您的代码所做的更改： * - 无需 formSubmit 即可尝试提交表单！true如果您希望提交继续进行，只需执行验证检查并返回false。

  • 此外，您不需要检查x == null案例。如果文本框为空，则其值为“”。

  • 不过，可能需要检查 x 不仅包含空格。如果您不关心支持旧浏览器，您可以使用新的 Javascript 修剪功能。如果您关心向后兼容性，请尝试提供的众多 javascript 库之一trim或以下内容：

function formSubmit()
{
    var x=document.forms["signup_form"]["tname"].value.replace(/^\s+|\s+$/g, '');
    if (x=="")
    {
         alert("First name must be filled out");
         return false;
    }
    return true;
}

如果我只是想避免提交空格，我会保留var x=原样并在检查中添加替换if(x.replace(/\s/g, '') == "")。但是，我还想修剪输入，以便如果用户输入“user1”或“user1”，表单将发送“user1”。

您可以在这里看到三个不同的版本：http: //jsfiddle.net/9LPfb/2/ http://jsfiddle.net/9LPfb/3/ http://jsfiddle.net/9LPfb/6/

于 2012-12-02T05:04:17.777 回答
-1

联系表

  function empty()  {   
     var x,y;

         x = document.forms["ff"]"name"].value; 
         y = document.forms["ff"]["surname"].value;

      if(x=="" ||x==null){
        alert("Enter your name");
        return false;
      }else if(y==""){
        alert("Enter your surname");
        return false;
      }else{
       alert('Data is sending');
       return true;
      } 
   };

在 html 中：

  <form method="POST" action="formdata.php" name="ff"onsubmit="return empty()">
    <table>
       <tr>
          <td>Enter Your Name : <input type="text" name="name" maxlength="30" size="40" id="na" ></td>
       </tr>
       <tr>
         <td>Enter Your Surname : <input type="text" name="surname" maxlength="30" size="40" id="sna"></td>
     </tr>
     <tr>
       <td>
         <input type="submit" name="formsubmit" value="submit" >
       </td>
    </tr>
  </table>
</form>
于 2015-06-09T11:53:52.927 回答