I'm using the validation plugin and the form plugin, but I can't seem to get them to play nice together. The validation side works fine, but I was unhappy with the basic post action so I decided to use ajax instead. The form plugin seemed like the way to go, but I'm ready to discard it and use the native jQuery ajax functions if I can't get this working.
The data should not be submitted until the validation has passed, but if I leave any field blank I get the validation error as expected, but the data is also submitted resulting in a 500 error because it tries to parse an empty string. I don't understand why the ajaxSubmit function is being called when it's in the submitHandler. The "return false" in the submit handler should prevent the default submit action. Can anyone see where the problem is?
"The good news about computers is that they do what you tell them to do. The bad news is that they do what you tell them to do." -- Ted Nelson
One problem that I so see is that you are calling both ajaxForm and ajaxSubmit not he same form. One or the other; not both. I don't think it's the source of your problems, but it is not something you should do.
Interesting that you ask about that. I just added this code...
...and I never get the alert box. But I've looked at the examples for both plugins and I can't figure out what I've got wrong. The examples still define "action" and "method" attributes for the form and they use "type=submit" for the button. I'm used to using a standard (non-submit) button and then acting on the click event but that's not how these plugins work. Puzzling...
I wonder if the submitHandler needs to be defined before the rules....seems like a stretch, but I'll give it a try.
If I complete all the fields, the data is posted properly and I get the two alert boxes (lines 5 and 28). But if I leave a field blank, I get a server error and no alert boxes. That tells me that the default submit action is still taking place. I guess I need to do some more digging in the validation docs because it says this about submitHandler:
"Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it validated."
But it doesn't seem to be working that way. Maybe there's another option that I've overlooked to disable the default submit. Back to the documentation...
I don't understand. I thought you were referring to the fact that I wasn't using a jQuery selector on the call to ajaxSubmit, so I changed that. Perhaps I misunderstand the docs.
"ajaxForm - Prepares a form to be submitted via AJAX by adding all of the necessary event listeners. It does not submit the form. Use ajaxForm in your document's ready function to prepare your form(s) for AJAX submission."
"ajaxSubmit - Immediately submits the form via AJAX. In the most common use case this is invoked in response to the user clicking a submit button on the form."
To me this does not sound like they are redundant, but rather that both are required. I'm not trying to waste your time and I apologize for trying your patience. This is the first time I've used either of these plugins and obviously my lack of experience is showing. Can you provide a bit more guidance on how this code should be changed?