jQuery ajax表单提交 - 验证失败时导致的多个发布/获取请求

时间:2021-05-10 20:34:02

I have a problem where if a form submission (set up to submit via AJAX) fails validation, the next time the form is submitted, it doubles the number of post requests - which is definitely not what I want to happen. I'm using the jQuery ValidationEngine plugin to submit forms and bind validation messages to my fields. This is my code below. I think my problem may lie in the fact that I'm retrieving the form action attribute via $('.form_container form').attr('action') - I had to do it this way as using $(this).attr was picking up the very first loaded form's action attr - however, when i was loading new forms into the page it wouldn't pick up the new form's action correctly, until i removed the $(this) selector and referenced it using the class. Can anyone see what I might be doing wrong here? (Note I have 2 similar form handlers which are loaded on domready, that could also be an issue)

我有一个问题,如果表单提交(设置为通过AJAX提交)验证失败,下次提交表单时,它会使请求的数量翻倍 - 这绝对不是我想要发生的。我正在使用jQuery ValidationEngine插件提交表单并将验证消息绑定到我的字段。这是我的代码。我认为我的问题可能在于我通过$('。form_container form')检索表单操作属性.attr('action') - 我必须这样做,因为使用$(this).attr拿起第一个加载的表单的动作attr - 然而,当我在页面中加载新表单时,它不会正确地获取新表单的动作,直到我删除了$(this)选择器并使用该类引用它。谁能看到我在这里做错了什么? (注意我有2个类似的表单处理程序,它们在domready上加载,这也可能是一个问题)

        $('input#eligibility').live("click", function(){
            $(".form_container form").validationEngine({
                ajaxSubmit: true,
                ajaxSubmitFile: $('.form_container form').attr('action'),
                success :  function() {
                    var url = $('input.next').attr('rel');
                    ajaxFormStage(url);
                },
                failure : function() {
                    //unique stuff for this form
                }
            });
        });
         //generic form handler - all form submissions not flagged with the #eligibility id
        $('input.next:not(#eligibility)').live("click", function(){
            $(".form_container form").validationEngine({
                ajaxSubmit: true,
                ajaxSubmitFile: $('.form_container form').attr('action'),
                success :  function() {
                    var url = $('input.next').attr('rel');
                    ajaxFormStage(url);
                },
                failure : function() {
                }
            });
        });

1 个解决方案

#1


1  

The problem is that you bind the validation engine twice when you click twice. I'm not very familiar with validationengine but I'm sure that is your problem.

问题是当您单击两次时绑定验证引擎两次。我对validateengine不太熟悉,但我确信这是你的问题。

Once the validationEngine has been bound you need to make sure you don't bind it again.

一旦绑定了validationEngine,您需要确保不再绑定它。


EDIT

编辑

OR do this:

或者这样做:

    $('#eligibility').live("click", function(){
        $.validationEngine.submitForm($(".form_container form"),{
            ajaxSubmit: true,
            ajaxSubmitFile: $('.form_container form').attr('action'),
            success :  function() {
                var url = $('input.next').attr('rel');
                ajaxFormStage(url);
            },
            failure : function() {
            }
        });
        return false;
   });
   $('input.next:not(#eligibility)').live("click", function(){
        $.validationEngine.submitForm($(".form_container form"),{
            ajaxSubmit: true,
            ajaxSubmitFile: $('.form_container form').attr('action'),
            success :  function() {
                var url = $('input.next').attr('rel');
                ajaxFormStage(url);
            },
            failure : function() {
            }
        });
        return false;
  });

#1


1  

The problem is that you bind the validation engine twice when you click twice. I'm not very familiar with validationengine but I'm sure that is your problem.

问题是当您单击两次时绑定验证引擎两次。我对validateengine不太熟悉,但我确信这是你的问题。

Once the validationEngine has been bound you need to make sure you don't bind it again.

一旦绑定了validationEngine,您需要确保不再绑定它。


EDIT

编辑

OR do this:

或者这样做:

    $('#eligibility').live("click", function(){
        $.validationEngine.submitForm($(".form_container form"),{
            ajaxSubmit: true,
            ajaxSubmitFile: $('.form_container form').attr('action'),
            success :  function() {
                var url = $('input.next').attr('rel');
                ajaxFormStage(url);
            },
            failure : function() {
            }
        });
        return false;
   });
   $('input.next:not(#eligibility)').live("click", function(){
        $.validationEngine.submitForm($(".form_container form"),{
            ajaxSubmit: true,
            ajaxSubmitFile: $('.form_container form').attr('action'),
            success :  function() {
                var url = $('input.next').attr('rel');
                ajaxFormStage(url);
            },
            failure : function() {
            }
        });
        return false;
  });