jQuery validate plugin with event.preventDefault()

Question

I have a page that has a Contact Form slide down when a link is clicked (i.e. it is a div on the page that displays with .slideDown('slow')

I have the jQuery validation plugin working on the contact form, only I noticed that when I was testing I had event.preventDefault(); commented out. In the final version I want that to be uncommented because I don't want the page to redirect or even post when Submit is clicked.

I have the Submit button sending an Ajax post to send the email. How can I retain this functionality and still use jQuery's validate plugin?

Answer 1

Instead of setting an action on the form $.bind() a click handler to the forms submit button and use $.post() to make the post request. A few words of caution though. First, you should probably set the action on the form and let it redirect by default for people that have Javascript disabled, then use jQuery to remove the action from the form and to $.bind() the click handler to the submit button when the page loads. Second, in my code when I say to use alert or some other accessible notification, I mean use the alert() method or if you use a dom element to contain the notification, make sure you use WAI-ARIA live region and roles attributes to make the notification accessible to assistive devices.

 function onFormSubmit(event)
 {
      $.post('http://url.to.your.service', 
             $('#theFormId').serialize(), 
             function(data, textStatus)
             {
                   switch(textStatus)
                   {
                        // Alert or some other 
                        // accessible notification of success/failure
                   }
             }
      );
 }

EDIT: I really need to read questions more carefully sometimes. So you are already using the submit button to send an AJAX request. Maybe my usability comments will be useful to you so I'll leave that part of the answer up. If you set the action to javascript:null(0), #, or set the target to a hidden iframe, that should work as well.