如何通过表单验证防止双重提交

Question

我一直在研究这个问题的最后一天左右。 我试图阻止用户双击我的 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 元素中。 谢谢大家的帮助！！！！！！

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