Need help with jquery validation plugin submitHandler redirect

Question

I am having problems using the jquery validation plugin's submitHandler.

I am working within the confines of some code that I do not have access to change so I am trying to find some work arounds.

This is what I would like to do... After the form validates, when the user clicks the submit button, and it is successful redirect the page to a different page.

If I were not using jquery, I'd use the location.replace method and that is what I tried to use, but it does not seem like the submitHandler is executing because I tried a simple alert('TEST'); and it did not work.

$(document).ready(function(){
  $("#myForm").validate({
    submitHandler: function(form){
      location.replace('http://www.google.com');
      form.submit();
      }
   });
});

I tried this to test it out but it also did not work...

$(document).ready(function(){
  $("#myForm").validate({
    submitHandler: function(form){
      alert("TEST");
      form.submit();
      }
   });
});

The form submits and sends the email as it is supposed to when all of the fields are valid and it does not send the email with the fields are not valid. The only problem I have is handling the relocation of the page.

Any help anyone can provide would be greatly appreciated!

Answer 1

form.submit is a function, so you need to call it, like this: form.submit().

However, if you change the location of the page before the form is submitted (which is what location.replace() does!) means the form won't be properly submitted. Are you trying to redirect the user after the form has been submitted? If so, you'll have to send the redirect from the server, or (as @Amir said in the comment below) use Ajax to submit the form, and do your location.replace() call in the ajaxComplete handler.

As far as I know, once you've submitted the form - unless you use Ajax to submit it - you're really not in control of the page anymore, since it's on its way out. I haven't tested it myself, though.

Answer 2

Your syntax isn't correct:

("$myForm").validate({

Should probably be:

$("#myForm").validate({

Or if it's a class:

$(".myForm").validate({

When debugging what isn't working, always check the console for errors first, what you have currently is certainly throwing a syntax error.