views:

682

answers:

1

Hi, 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)

        $('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  A: 

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.

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


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;
  });
David Murdoch
Ah ok, I see (I think). So I should unbind the validationengine in the failure callback, as the click event will bind it again with the next attempt at submission - does that make sense?
kenny99
Thanks for the suggestion David, but I'm currently getting this error - "$.validationEngine.settings is undefined". Just trying to figure it out, as your suggestion seems much cleaner than me manually unbinding the validationEngine in the failure callback
kenny99
Hmm, still can't get this working. Any other ideas at all?
kenny99
looks like validationEngine is actually broken.
David Murdoch
Finally got it sorted! added $('#eligibility').die('click'); to unbind the form from the click.
kenny99