contact

jquery ajaxForm and validate with ajaxSubmit()

I am currently working my way into the jquery universe and I really like the great plugins that take a lot of the workload of off your back. I am developing an application that uses the ajaxForm plugin and it worked nicely. Then I implemented the also great validate plugin and it for it self also worked really well.

The problem:

it seems that the ajaxForm keeps getting submitted with or without errors using the ajaxForm submission and if the form contains no errors it gets submitted a second time via this method discribed by the plugin author:

</pre>
submitHandler: function(form) {
jQuery(form).ajaxSubmit({
target: "#result"
});
}
<pre>

The solution / workaround:

I found the only way to get this work is to completly ignore the submitting capabilities of the validate plugin and use the ajaxForms built in beforeSubmit option to check the form using the validate valid() function.

</pre>
beforeSubmit:checkForm // add this to your ajaxForms options

function checkForm(data,form){ // this method will tell the beforSubmit method if the form is valid
 return $(form).valid();
 }
<pre>

note: I have

Tags: , , , , ,

This entry was posted on Tuesday, October 14th, 2008 at 22:47 and is filed under Tech Questions. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

  1. Will June 10, 2009 at 16:23

    Thanks for this. Slowly learning jQuery and love the validation plugin.

    Was horrified to think I had to rewrite a ton of code when it came to adding the AJAX submit, so your workaround is a lifesaver!

  2. Richard June 11, 2009 at 10:25

    Thanks so much for this posting, I was getting frustrated searching for this! It was a great help!

  3. Caroline February 1, 2010 at 23:46

    Thank you for this.
    You saved me several long, fruitless hours.

  4. Mario February 14, 2010 at 04:55

    Wow thanks this is quickest thing to get AJAX. But I encountering a problem when the form contains input type=file. The form’s data couldn’t serialized. Any idea?

  5. Christoph Peter February 14, 2010 at 09:44

    Hi

    i am not really sure. I Never made an Ajax file uploader, i always used Flash. Would Be interesting though. But i imagine its got something to so with the Form just submitting the file Name which is the Value of the Input and not take the binary Data. I guess this Ajax Plugin Loops through all Inputs in the Form and takes the Val() property?