connecting ajax() and validate()

connecting ajax() and validate()




hi folks
 
i'm fairly new to jQuery, and am trying to understand how things work.
 
I have the following 2 things i am trying to do with a form, and they each work perfectly on their own - but i am having an issue getting them to work together:
 
1) validation, using the following code: 
  1.    $("#commentForm").validate({messages:
               {
       MyName: "*",
       MyEmail: "*",
       comments: "*"
       }
            
      });







2) ajax posting:

  1.  $("#submit").click(function() {
            
      
     var MyName = $("input#MyName").val();
     var MyEmail = $("input#MyEmail").val();
     var comments = $("input#comments").val();
     var dataString = 'MyName='+ MyName + '&MyEmail=' + MyEmail + '&comments=' + comments;
     //alert (dataString);return false;      
      
      $.ajax({
        type: "POST",
        url: "mail.asp",
        data: dataString,
        success: function() {
       $('#commentForm').before("<div id='message' style='color: #900;'></div>")
       $('#message').html("<h2>Thank you</h2>")
       .append("<p>Your message has been sent to the lecturer.</p>")
       .hide()
       //.fadeIn(1500, function(){
       // $('#message').append("!");
          //     });
       }
      });
     //return false;
     });
























I have been trying to connect the 2  - but cant figure it out, if someone can show me the method (as in teaching me to fish...) , that would be great.

Thanks!

here is my html code:


  1. <form method="post" id="commentForm" style="padding:0; margin:0;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="90" align="left" valign="top">Name</td>
        <td align="left" valign="top"><input type="text" name="MyName" id="MyName" value="" style="width: 150px;" class="required" /></td>
      </tr>
      <tr>
        <td width="90" align="left" valign="top">Email</td>
        <td align="left" valign="top"><input type="text" name="MyEmail" id="MyEmail" value="" style="width: 150px;" class="required email" /></td>
      </tr>
      <tr>
        <td width="90" align="left" valign="top">Comments</td>
        <td align="left" valign="top"><textarea name="comments" id="comments" style="width: 150px; height: 106px;" class="required"></textarea></td>
      </tr>
      <tr>
        <td width="90" align="left" valign="top">&nbsp;</td>
        <td align="left" valign="top"><input type="submit" name="submit" id="submit" value="Submit Comments" style="width: 150px;" /></td>
      </tr>
    </table>
    <input type="hidden" name="lectureURL" value="<%= request.ServerVariables("PATH_INFO")%>" />

    </form>