Question

I’m combining jquery validate() with the jquery form plugin to submit a form using Ajax. Everything works except that the submit button requires 2 clicks to submit. Any suggestions on how to resolve the issue?

In addition to return false recommended in the jquery form plugin (http://www.malsup.com/jquery/form/#ajaxSubmit), I’ve tried using preventDefault() and $.ajaxSetup({async:false});.

Also, the submit button is an image.

 <input id="submit" type="image" src="filename.jpg">

Here’s the code:

$(document).ready(function(){
$("#form-id").validate({
  rules: {
    email: {
      required: true,
      email: true
      }
    },
   messages: {
     email: {
       required: "Please enter a valid email address.",
       email: "Use this format: [e-mail]."
     }
  },
  submitHandler: function () {
    $('#form-id').submit(function(){
    var options = { 
        success: showMessages
    }; 
$(this).ajaxSubmit(options);
    return false;
    });

}//end submitHandler
});//end validate
});//end document.ready

Plugins used:

http://docs.jquery.com/Plugins/Validation

http://www.malsup.com/jquery/form/#ajaxSubmit

Answer 1

You don’t need to add a submit() handler to the form in the submitHandler, as ajaxSubmit will submit it for you. Try this:

submitHandler: function () {
    var options = { 
        success: showMessages
    }; 
    $('#form-id').ajaxSubmit(options);
}