如何使用表单验证防止重复提交

Posted 2023-02-24

【中文标题】如何使用表单验证防止重复提交

【英文标题】：How To Prevent Double Submit With Form Validation

【发布时间】：2019-06-18 10:29:08

【问题描述】：

过去一天左右我一直在研究这个问题。我试图阻止用户双击我的 django 项目的提交按钮并提交表单两次。我也在做表单验证，所以如果表单验证失败，我不想禁用提交按钮。在这种情况下，我的表单验证阻止了重复提交，因为我的表单中有一个唯一字段可以防止重复提交。我也在提交后进行重定向，但如果我双击或三次单击提交按钮，表单将失败并且永远不会进行重定向。

我尝试了以下代码的各种版本，我在类似的 SO 问题上找到了这些版本...

                  $(document).ready(function ()
                     $('form').submit(function() 
                    $('#status').attr('disabled', true);
                      );
                    );

作为更新，我合并了如下所述的代码：

                $(document).ready(function ()
                  $("#status").click(function() 
                     if(!$("form").hasClass("submitted"))
                       $("form").addClass("submitted");
                       $("form").submit();
                     
                   );
                 );

这似乎工作......但也许我错过了一些东西。如果用户在初始提交后一秒钟单击按钮，它会尝试重新提交表单，也许这就是上面的设计？我想我正在尝试防止双击并允许重定向发生，如果用户没有妨碍它，它通常会发生:)。在正常情况下，我正在运行的这段代码工作得很好......并在初始提交后重定向。即使用户再次点击，是否有办法阻止这种情况按预期发生？

就我的代码而言，我试图通过我的提交按钮传递一个值，因此，使用上面的代码可以防止在我合并它时传递该值。我使用的 html 如下所示：

<button type="submit" class="button15" name="status" id="status" value="Submitted"><h3 class="txtalgn4">Submit</h3></button>

如果我将上面的 JQuery 与显示的 HTML 一起使用，它们似乎会发生冲突，但它仍然不会阻止提交。

提前感谢您提供有关如何合并表单验证并防止用户双击表单并提交两次的任何想法。我还看到了一些使用会话特定变量的示例，但希望尽可能使用 JQuery/javascript 来解决。

我刚刚测试了下面的代码，它似乎正在执行，但没有提交表单。也没有错误。

                $(document).ready(function ()
                  $("#status73").click(function() 
                     if(!$("form").hasClass("submitted"))
                       console.log("hello world");
                       $("form").addClass("submitted");
                       $(window).unbind('beforeunload');
                       $("form").submit();
                     
                   );
                 );

hello world 是看它是否正在执行，事实上它正在执行。但是，我的 django 表单没有被处理。如果我将上面的代码与此 HTML 一起使用...

<button type="button" class="button15" name="status" value="Submitted" id="status73"><h3 class="txtalgn4">Submit</h3></button>

表单未提交。如果我将上面的代码与此 HTML 一起使用，则表单确实会被提交....

<button type="submit" class="button15" name="status" value="Submitted" id="status73"><h3 class="txtalgn4">Submit</h3></button>

区别在于按钮类型。我又是新人，所以我边走边学。感谢您的意见。

我相当确定问题是当按钮从提交更改为键入按钮时，我没有传递已提交的值。当用户单击提交按钮时，有什么方法可以将值提交为隐藏？我尝试了类似...

<input type="hidden" name="status" value="Submitted"/>
<button type="button" class="button15" name="status" value="Submitted" id="status73"><h3 class="txtalgn4">Submit</h3></button>

但这似乎并没有将状态值传递给表单。什么都没有发生。

我刚刚检查了我的控制台日志，但出现以下错误：

Uncaught ReferenceError: checkForm is not defined
    at HTMLFormElement.onsubmit ((index):104)
    at Object.trigger (jquery.min.js:2)
    at HTMLFormElement.<anonymous> (jquery.min.js:2)
    at Function.each (jquery.min.js:2)
    at w.fn.init.each (jquery.min.js:2)
    at w.fn.init.trigger (jquery.min.js:2)
    at w.fn.init.w.fn.(:8000/book/author/anonymous function) [as submit] (http://127.0.0.1:8000/static/jquery/jquery.min.js:2:85786)
    at HTMLButtonElement.<anonymous> ((index):23)
    at HTMLButtonElement.dispatch (jquery.min.js:2)
    at HTMLButtonElement.y.handle (jquery.min.js:2)

我也玩了一些隐藏值。探索上述错误。

我的 HTML 中有一个来自之前尝试的剩余 onsubmit 操作，这导致了我的大部分悲伤。我还将状态字段更改为隐藏在表单上而不是 HTML 元素中。感谢大家的帮助！！！！！！

【问题讨论】：

只需使用普通按钮而不是提交按钮，这样您就可以完全控制when 表单应该使用 jquery 发布。然后逻辑变得相当简单：如果有效而不是 is_submitting，则提交禁用并将提交设置为 true，否则什么也不做。

感谢您的回复。普通按钮是什么意思？当用户点击提交时，我需要能够传递状态值。

一个按钮<button type="submit"> 自动具有它在单击时提交表单的事件。所以在使用的时候，还得在准备好之前阻止提交事件的触发。所以“简单”的解决方案是使用<button type="button">，因此它没有自动提交事件。这样，您可以选择何时使用form.submit() 或$.post()，而不必为提交按钮是否已经可以发送表单而斗争。

感谢您的反馈。我对此很陌生...但是当我按照您的建议进行操作时，它现在根本不再提交表单。什么都没发生。当我按原样保留按钮时，它可以工作，我只是在双重提交中挣扎。

我建议你看看 JS Promises。我想这可能会对你有所帮助。

【参考方案1】：

您可以将按钮类型更改为按钮，并在最初提交时向表单添加一个类。如果课程在场，则不要提交表格。这可以防止禁用按钮。

请参阅下面使用 jQuery 的示例。请注意，这假设您的验证阻止了表单提交。

$("#status").click(function() 
    if(!$("form").hasClass("submitted"))
      $("form").addClass("submitted");
      $("form").submit();
    
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="">
  <input type="text"/>
  <button id="status" type="button" value="Submitted">Submit</button>
</form>

【讨论】：

感谢您的反馈。这对我来说很有意义，但是当我尝试实现它并将按钮类型更改为按钮时，它不会提交任何内容。我正在使用标准表单的 Django CreateView。我需要能够传递该值，但它似乎没有被传递。 Django 表单无法识别该值。

@SteveSmith 当您在 HTML 中将按钮更改为 type="button" 时，您是否实现了某种类型的 jQuery 函数 JavaScript 以在单击时执行表单提交？按钮类型的按钮不会自行执行任何操作，因此必须有一些关联的客户端脚本来执行表单提交。继续，将您的完整表单标记和相关的 JavaScript / jQuery 添加到您的问题中。

感谢您的帮助。请参阅上面的更新以及新的代码示例。