How to integrate jquery.validate with jquery.form?

I'm using this two plug-ins jquery.validate and jquery.form separately, but I would like to use them together. I have a simple user form with a few fields to validate.

The script with the plug-ins:

 $(function() {

  $("#my_form").validate({
   submitHandler: function(form) {

    var my_options = { 
     target:        '#save_form',
     dataType:      'json',
     beforeSubmit:  showRequest,
     success:       showResponse
    }; 
    $(form).ajaxForm(my_options); 

     }
  });  

 }); 

 function showRequest(formData, jqForm, my_options) { 
  $("#save_form").fadeIn().html('<img src="<?=ICONES?>spin_light.gif">');
 } 

 function showResponse(data, respon开发者_如何转开发seText, statusText)  { 
  // do something
 } 

This looks OK, and validation works. The problem is that I have to click twice in the submit button (<input type="submit" value="Save" class="button" />) to the form submits. Every time, to the form submits, it will only go with the second click in the button. What's wrong here?

Regards, João Clérigo

---

never tried the submitHandler option of validate,
i also use these two plugins, but in this way:

$('#my_form').validate({[your options here]}).submit(function ()
    {
        $(this).ajaxSubmit({
            beforeSubmit: function (arr, jqForm, options)
        {
                //can continue if the form is valid
                return jqForm.validate().form();
            },
            success: function (ret, statusText, xhr, jqForm)
            {
                //party
            }
        });
        return false;//stop regular submit
    });