[jQuery] Problem with jquery.form.js and jquery.validate.js working together

[bcbounders]

Hi,

I feel pretty stupid, but I can't seem to get the jQuery Form plugin
(http://malsup.com/jquery/form/#getting-started) and the jQuery
Validation plugin (http://bassistance.de/jquery-plugins/jquery-plugin-
validation/) to work together.  I can get them to work separately, but
I can't seem to make them play "nice" together.  :(  I've been
prowling through this group, trying to uncover any ideas from past
posts... but so far, they're only serving to confuse me even more.

I've got a test page up that has the Validation plugin working the way
I'd like.  You can see it here:  http://tinyurl.com/mrqyv6

At the moment, it successfully validates the form fields and, once
valid, passes it to the PHP file for processing.

But, here's what I'd LIKE to have happen:

(1) User clicks "Submit" --> jQuery Validation processes the form and
displays any errors inline with the label (this part is working)
(2) Once the form passes validation, submit the form to the "contact-
us.php" form.  This PHP file is setup to also validate the form fields
and can inject its errors into the page in case JS is disabled or
didn't load correctly.  The PHP file also re-directs to a "Success"
page, again for users without JS.
(3) Once the submit is successful, I'd like to popup an Alert window
saying it was successful and clear the form of its data

I've tried using the "submitHandler" option of the Validation plugin
to send the form to the jQuery Form plugin for AJAX submission, but
that didn't work.  Then, I tried switching things around so that I
used the "beforeSubmit" option of the jQuery form plugin to call the
Validation.  Again... no go.

Here's the code I've got working for the Validation portion of the
process.

[code]<code>
$(document).ready(function() {
        // validate contact form on keyup and submit
        $("#contactForm").validate({
                rules: {
                        contactName: {
                                required: true,
                                minlength: 2
                        },
                        contactEmail: {
                                required: true,
                                email: true
                        },
                        message: {
                                required: true,
                                minlength: 2
                        }
                },
                messages: {
                        contactName: "Please enter your name",
                        contactEmail: "Please enter a valid email address",
                        message: "Please enter your message"
                },
                errorPlacement: function(error, element) {
                        element.siblings("label").children("span.error").html(" 
 " +
error.text());
                },
                success: function(error, element){
                        
element.siblings("label").children("span.error").html(null);
                }
        });
});
</code>[/code]

I really appreciate any insight/help on getting this to work.

Thanks,

 - John