Trouble with jquery validator and AJAX form submission

Trouble with jquery validator and AJAX form submission

I'm creating an AJAX form and wanting to run some client-side validation using jquery.validator ( http://bassistance.de/jquery-plugins/jquery-plugin-validation/). It works as I move through the form but when I hit the submit button, the AJAX portion will submit the form regardless of the results of the validation. Is there a way to prevent the AJAX handler from submitting if validation fails?

 Here's my form code:

  1. <form id="form1" action="" method="post">
  2.                  <label for="TxtName">Name</label>
  3.                         <input type="text" name="TxtName" id="TxtName" class="txtinput"/>
  4.                 <br />
  5.                 <div class="small">
  6.                 <label for="TxtEmail">Email</label>
  7.                 <input type="text" name="TxtEmail" id="TxtEmail" class="txtinput" style="width:241px; height:35px;"/>
  8.                 </div>
  9.                 <label for="TxtPhone">Phone</label>
  10.                 <div class="small" style="padding-left:6px">
  11.                 <input type="text" name="TxtPhone" id="TxtPhone" class="txtinput" style="width:241px; height:35px;"/>   
  12.                 </div>
  13.                 <label for="TxtMessage">Message</label>
  14.                 <textarea name="TxtMessage" rows="20" cols="20" id="TxtMessage" class="txtmessage"></textarea>
  15.                 <input type="submit" name="submit" value="Submit" id="btn-form" class="button"/>
  16.             </form>

and here's the javascript for the validator:


  1. //initiate validator on load
  2. $(function() {
  3. // validate contact form on keyup and submit
  4. $("#form1").validate({
  5. //set the rules for the field names
  6. rules: {
  7. TxtName: {
  8. required: true,
  9. minlength: 2
  10. },
  11. TxtEmail: {
  12. required: true,
  13. email: true
  14. },
  15. TxtMessage: {
  16. required: true,
  17. minlength: 2
  18. },
  19. },
  20. //set messages to appear inline
  21. messages: {
  22. TxtName: "Please enter your name",
  23. TxtEmail: "Please enter a valid email address",
  24. TxtMessage: "Please enter your message"
  25. }
  26. });
  27. });

followed by the javascript for the AJAX submission:
  1. //engage on the page load
  2. $(function() {
  3.   //trigger ajax on submit
  4.  
  5.   $('#form1').submit( function(){
  6.   //hide the form
  7.   $('#form1').hide();
  8.   //show the loading bar
  9.   $('.loader').append($('.bar'));
  10.   $('.bar').css({display:'block'});
  11.   //send the ajax request
  12.   $.get('mail.php',{name:$('#TxtName').val(),
  13.                     email:$('#TxtEmail').val(),
  14.                     phone:$('#TxtPhone').val(),
  15.                     comment:$('#TxtMessage').val()},
  16.   //return the data
  17.   function(data){
  18.     //hide the graphic
  19.     $('.bar').css({display:'none'});
  20.     $('.loader').append(data);
  21.   });
  22.   //stay on the page
  23.   return false;
  24.   });