返回false不停止提交表单

问题描述 投票:22回答:3

我的目的:如果用户字段和密码字段为空,我想停止表单提交。这是我正在尝试的代码:

<!DOCTYPE html>
<html>
<head>
    <script>
        function doit() {

            var usr = document.getElementById('ur').value;
            var psw = document.getElementById('pw').value;

            if ((usr.trim() == '') && (psw.trim() == '')) {
                alert("cannot Submit form");
                return false;
            }

        }
    </script>

</head>


<body>

    <form action="post.php" method="post" onsubmit="doit()">
        User:
        <input type="text" id="ur" name="user">
        <br>
        <br> Pass:
        <input type="password" id="pw" name="pass">
        <br>
        <br>
        <button>Submit</button>
    </form>


</body>
</html>

我正在学习JavaScript。如果你纠正代码并稍微解释为什么它不起作用将会有所帮助。

javascript
3个回答
47
投票

return false工作正常,你调用该函数的方式是错误的。

<form action="post.php" method="post" onsubmit="doit()"> 

只是调用它,不对返回值做任何事情

<form action="post.php" method="post" onsubmit="return doit()"> 
                                                ^

将在错误的返回值上停止表单发布。

请阅读MSDN上的这个注释,尽管它不是IE特定的

您可以通过在事件处理程序中返回false来覆盖此事件。使用此功能验证客户端上的数据,以防止将无效数据提交到服务器。如果事件处理程序由表单对象的onsubmit属性调用,则代码必须使用return函数显式请求返回值,并且事件处理程序必须为事件处理函数中的每个可能的代码路径提供显式返回值。

现在转到另一个重点。

你的if条件只会在两个字段都为空时停止表单提交,而即使这两个字段中的任何一个为空,它也应该这样做。那&&(AND)应该是一个||(OR),并且在你的函数结束时,如果没有任何返回false,那么return true


8
投票

onsubmit事件接受布尔值,因为您没有返回任何内容,因此默认情况下它为true。您需要在此事件中添加返回。

更改

onsubmit="doit()"> 

onsubmit="return doit()"> 

0
投票

使用preventDefault()在提交时使用addEventListener

    document.form1.addEventListener("submit", function(event) {

      var usr = document.getElementById('ur').value;
      var psw = document.getElementById('pw').value;

      if ((usr.trim() == '') || (psw.trim() == '')) {
        alert("cannot Submit form");
        event.preventDefault();
      } else {
        alert("submit");
      }

    });
  <form action="" method="post" name="form1">
    User: <input type="text" id="ur" name="user"><br><br> 
    Pass: <input type="password" id="pw" name="pass"><br><br>
    <input type="submit" value="Submit" />
  </form>
© www.soinside.com 2019 - 2024. All rights reserved.