您的位置: 首页  >  技术问答  >  如何防止通过表单验证进行双重提交

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

分类: 技术问答 • 2022-05-25 13:10:12
问题描述：

我在过去约一天的时间里一直在研究这个问题.我试图防止用户双击我的django项目的Submit按钮，然后两次提交表单.我也在进行表单验证，因此如果表单验证失败，我不想禁用提交"按钮.在这种情况下，我的表单验证阻止了两次提交，因为我的表单中有一个唯一字段，它阻止了两次提交.我也在提交之后进行重定向，但是如果我双击提交按钮，请双击该表单，表单将失败，并且永远不会进行重定向.

I have been researching this problem for the last day or so. I am trying to prevent the user from double clicking on the submit button for my django project and submitting the form twice. I am also doing form validation so if the form validation fails, I don't want to disable the submit button. My form validation is preventing a double submit in this case because I have a unique field in my form which is preventing the double submit. I am also doing a redirect after the submit, but if I double or triple click the submit button the form fails and never does the redirect.

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

I've tried various versions of the code below which I found on a similar SO issue...

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

作为更新，我合并了以下代码:

As an update, I've incorporated code as outlined below:

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

这似乎正在起作用...但是也许我缺少了一些东西.如果用户在初次提交后第二秒钟单击该按钮，它将尝试重新提交表单，也许这是上面设计的?我想我正在尝试防止双击并允许重定向发生，如果用户没有碍事的话:).在正常情况下，我正在运行的这段代码可以正常工作……并在首次提交后进行重定向.是否有某种方法可以防止即使用户再次单击也可以按预期进行呢?

This would appear to be working...but maybe I'm missing something. If the user clicks the button like a second after the initial submit, it tries to resubmit the form, perhaps this is as designed above? I guess I'm trying to prevent the double click and allow the redirect to happen as it normally would if the user didn't get in the way :). Under normal cases, this code I'm running works just fine...and redirects after the initial submit. Is there someway to prevent the allow this to happen as expected even if the user clicks again?

对于我的代码，我试图通过我的Submit按钮传递一个值，因此，使用上面的代码可以防止在合并它时传递该值.我正在使用HTML，如下所示:

In the case of my code, I am trying to pass a value with my submit button, and as such, using the code above prevents the value from being passed when I incorporate it. I am using HTML as shown below:

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

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

If I use the JQuery above along with the HTML shown, they seem to conflict and it still doesn't prevent the submit.

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

Thanks in advance for any ideas on how I can incorporate form validation and preventing the user from double clicking the form and submitting it twice. I have also seen some examples of using session specific variables, but was hoping to solve using JQuery/Javascript if possible.

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

I just tested the code below, and it appears to be executing, but the form is not getting submitted. No errors either. 

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

您好世界是看它是否正在执行，实际上是否正在执行.但是，我的django表单未得到处理.如果我将上面的代码与此HTML一起使用...

The hello world was to see if it is executing and in fact it is. However, my django form is not being processed. If I use the code above with this HTML...

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

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

The form does not get submitted. If I used the code above with this HTML, the form does get submitted....

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

不同之处在于按钮类型.我又是新手，所以我正在学习.感谢您的输入.

The difference is the button type. Again I'm new so I'm learning as I go. Thanks for the input.

我可以肯定的问题是，当按钮从提交"更改为键入"时，我没有传递已提交"的值.当用户单击提交"按钮时，是否可以通过某种方式将值提交为隐藏状态?我尝试过类似...

I'm fairly certain the issue is that I'm not passing the value of Submitted when the button is changed to type button from submit. Is there some way I can submit the value as hidden when the user clicks on the submit button? I tried something like...

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

但是，这似乎并未将状态值传递给表单.什么都没发生.

But this doesn't seem to pass the status value to the form. Nothing happens.

我刚刚检查了控制台日志，但遇到以下错误:

I just checked my console log and I have the following errors:

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)

我还玩了一些隐藏值.探索以上错误.

I also played around a bit with the hidden values. Exploring errors above.

在HTML中，以前的尝试有一个剩余的onsubmit操作，这引起了我的大部分悲伤.我还将状态字段更改为隐藏在表单上，​​而不是在HTML元素中.感谢您的所有帮助！！！!!!

I had a leftover onsubmit action in my HTML from previous attempts that was causing most of my grief. I also changed the status field to be hidden on the form instead of in the HTML element. Thanks for all of the help!!!!!!

答

您可以将按钮类型更改为button，并在最初提交表单时将其添加到表单中.如果存在该课程，则不要提交表格.这样可以防止禁用按钮.

You can change the button type to button, and add a class to the form when it is initially submitted. If the class is present then do not submit the form. This prevents disabling the button.

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

See the below example using jQuery. Note that this assumes your validation is preventing the form from being submitted.

$("#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>

相关推荐