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

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>