我的 onsubmit="return onNewUserRegistrationCheck(this);"仍然提交 FALSE 表单

Posted 2023-05-07

【中文标题】我的 onsubmit="return onNewUserRegistrationCheck(this);"仍然提交 FALSE 表单

【英文标题】：my onsubmit="return onNewUserRegistrationCheck(this);" still submits form on FALSE

【发布时间】：2012-03-21 13:56:15

【问题描述】：

我已经阅读了几篇关于这个问题的 SO 帖子，我发现有一个可能解释是this 一个。 该帖子中的回复说“如果您以编程方式调用 submit()，浏览器不会在表单上调用 onSubmit 事件。”

我不确定这是否是影响我的表单的有效因素。

我的代码 onsubmit="return onNewUserRegistrationCheck(this);" 100% 工作 -- 对 onNewUserRegistrationCheck(this) 的调用是 100% 发生的。

代码如下：

      function onNewUserRegistrationCheck(theForm)
      

          alert("In onNewUserRegistrationCheck()");

          if(theForm.loginname.value == "<?php echo Labels::$DEFAULTLOGINEMAILLABEL ?>" 
              || theForm.password.value == "<?php echo Labels::$DEFAULTPASSWORDLABEL ?>" )
            
              alert("returning false now, so -- HOPEFULLY the form doesn't submit");
              return false;
          
     

这是表格：

    <form enctype="multipart/form-data" onsubmit="return onNewUserRegistrationCheck(this);"
                 class="registerFormStyles" name="registerForm" id="regform"
                 action="regTheNewUser.php" method="post">
         <input type="text" id="loginname" name="<?php  echo Labels::$USERNAMELABEL ?>"
               style="width:260px" value="<?php echo Labels::$DEFAULTLOGINEMAILLABEL ?>" />

         <input type="password" placeholder="<?php echo Labels::$DEFAULTPASSWORDLABEL ?>" 
                  id="password" name="<?php echo Labels::$PASSWORD ?>"
            style="width:220px" class="inactive" />

         <input type="hidden" name="newUserRegister" id="newUserRegisterId">

         <input type="image" name="registerButton" value="Register" class="login-button-landing" 
                    onclick="document.registerForm.submit();">
    </form>

请注意，我使用 type="image" 并执行程序化 submit()。根据一些SO帖子，结果 像我这样的程序化 submit() 是这样的：'如果您以编程方式调用 submit()，浏览器不会在表单上调用 onSubmit 事件'

但是，当我单击我的 name="registerButton" 伪提交按钮时，我看到了 2 个警告框：

  alert box #1 pops up and says:  "In onNewUserRegistrationCheck()"

那么……

  alert box #2 pops up and says:  "returning false now, so -- HOPEFULLY the form doesn't submit"

当我单击表单上的 my name="registerButton" 按钮时，会出现这 2 个警告框。 所以我必须（？）误解我读过的帖子的意思 '调用 submit() 不会触发 onsubmit 事件'。

底线是表单仍然提交到文件“regTheNewUser.php” 即使您可以看到由于警报消息而发生“返回错误” 被看到“现在返回 false，所以 -- 希望表单不会提交”

如何在不使用 type="submit" 按钮的情况下 停止提交表单？ 我已经向自己证明了我的 onsubmit="return onNewUserRegistrationCheck(this);" 是 100% 被调用。我返回 false，但表单仍然提交。

当我发现无效的表单文本输入时，如何停止提交表单 为什么在 STOP 我的表单提交上方没有“返回 false”？

【问题讨论】：

您可以尝试onsubmit="onNewUserRegistrationCheck(this); return false;" 看看它是否有效。如果是这样，那么至少你知道这是你的函数逻辑的问题。

会尝试的。但是看看上面的代码， alert("returning false now, so -- HOPEFULLY the form doesn't submit");返回假； - 我不可能看到“希望..etc”并且不会返回错误。而且我看到“希望......”所以“返回错误”必须发生 - 如果您查看代码，除非出现“返回错误”，否则“希望......”似乎无法出现在那之后。

【参考方案1】：

删除

onclick="document.registerForm.submit();"

！！！

type=image 是一个提交和 document.registerForm.submit() 不会触发 onsubmit 事件处理程序！

所以不管怎样，点击首先触发提交，然后事件处理程序启动，因为它是一个提交按钮，然后表单从第一个 submt 发送到服务器

【讨论】：

并 ' 将其替换为 'input type="submit" ??我在上面的帖子中提到“如何在不使用 type="submit" 按钮的情况下停止提交表单？”.......不确定你是否看到了那部分。如果我发现输入错误并且不使用 type="submit" 输入，我需要有条件地停止表单提交。

哇——我 100% 不知道 type="image" 也是一个提交。谢谢你，这对我来说很重要，非常有帮助。谢谢M。

mplungjan，你是一个聪明的天才，解决了这个问题，只是出色的东西。我读过的帖子，我尝试过的事情。我的整个问题是，我的印象是只有 type="submit" 是可以提交的元素。这对我来说很重要，因为很多东西都是新的——谢谢伙计！

PS 你真的应该检查服务器上的登录凭据。您的代码可以使用 view-source 或 firebug 轻松查看，任何人都可以登录

【参考方案2】：

在你的帖子中你使用过

Input type = "Image" -- 与 input type="submit" 具有相同的行为，因此在单击图像时会触发 onsubmit 事件。您已经从 onsubmit 事件处理函数返回 false，并且 onsubmit 处理程序已注册到表单，因此返回值被发送到表单并停止表单的提交操作。

但是你说你的表单被提交是因为，

在图像中，您已注册 onclick 事件，您已在该事件上以编程方式调用 submit() 方法，因此您的表单正在提交。

为了阻止您的表单在返回 false 时被提交，只需从图像中删除 onclick 事件处理程序并将其替换为以下代码

<input type="image" name="registerButton" value="Register" class="login-button-landing" >

希望这能解决你的问题

【讨论】：

AmGates，谢谢，+1，我已经在 mplungjan 的帮助下修复了它。感谢您花时间重申正确的方法来完成这项工作。