Question

我正在尝试使用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>

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

Answer 1

你有错误的statememts执行。您在验证前提交表单。将此语句移到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>

DEMO

Answer 2

在您的函数中

只需删除此行

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

Answer 3

你的程序流程有问题。
在提交表格之前进行验证提交后没有使用验证，我认为你错误地做了。只需在验证后提交。

Answer 4

尝试：

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

Answer 5

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

<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>

Answer 6

试试这个：

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案例。如果文本框为空，则其值为＆＃34;＆＃34;。
可能需要的是检查x不仅包含空格。如果您不关心支持旧版浏览器，则可以使用新的Javascript修剪功能。如果您关心向后兼容性，请尝试使用提供trim或以下内容的众多JavaScript库中的一个：

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, '') == "")。但是，我还想修改输入，以便用户输入＆＃34; USER1＆＃34;或＆＃34; user1＆＃34;表格将发送＆＃34; user1＆＃34;。

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

Answer 7

联络表格

  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>

如果验证不正确，请在提交期间停止表单

7 个答案: