title: jQuery - Using validate plugin with AJAX form plugin
body: <p>I have used both the validate plugin and the AJAX form plugin to great success, but using them together is baffling me.</p>
  
  <p>If I use the validate plugin to validate, then on success, post the AJAX form, nothing happens. Literally. Even in Firebug, the AJAX plugin doesn't seem to do anything.</p>
  
  <p>If I try it the other way around, where by I use the beforeCallback to then call jQuery validate plugin...no validation is done, but the form submits to the page.</p>
  
  <p>So I can get each plugin to work, but not together. </p>
  
  <p>Does anyone have any idea? The first route I describe is used here like so:</p>
  
  <pre><code>function sendFormVacancy() {
  
      alert("submit"); // This does get called, but the code below doesn't submit the form.
  
      var options = {
  
          beforeSubmit:  validateRequest,
          target:     "#messages",
          clearForm:  true,
          type:       "POST",
          url:        "/form-vacancy.php",
  
          success: function() {
              $('#messages').html("&lt;p&gt;&lt;?php _e("Application sent!", "tokheim"); ?&gt;&lt;/p&gt;").css('color', 'green');
          },
  
          error: function() {
              $('#messages').html("&lt;p&gt;&lt;?php _e("Sorry, an error occurred.", "tokheim"); ?&gt;&lt;/p&gt;").css('color', 'red'); 
          }
  
      }; 
  
      $("#static-form-vacancy").ajaxForm(options);
  
  }
  
  $("#static-form-vacancy").validate({ 
  
      rules: { 
  
          fieldfile:"required",
          fieldtitle:"required",
          fieldfirstname:{ required: true }, 
          fieldlastname:"required", 
          fieldaddress1:"required",
          fieldcity:"required",
          fieldcountry:"required",
          fieldphone:"required",
          fieldemail:{ required: true, email: true },
          fieldcontactmethod:"required",
          fieldrelocate:"required",
          fieldcomments:"required"
  
      }, 
  
      messages: { 
  
          fieldfile:"&lt;?php _e("Select a file to upload", "tokheim"); ?&gt;",
          fieldtitle:"&lt;?php _e("Select your title", "tokheim"); ?&gt;",
          fieldfirstname:{ required:"&lt;?php _e("Enter your firstname", "tokheim"); ?&gt;" },
          fieldlastname:"&lt;?php _e("Enter your lastname", "tokheim"); ?&gt;",
          fieldaddress1:"&lt;?php _e("Enter your address", "tokheim"); ?&gt;",
          fieldcity:"&lt;?php _e("Enter your city", "tokheim"); ?&gt;",
          fieldcountry:"&lt;?php _e("Enter your country", "tokheim"); ?&gt;",
          fieldphone:"&lt;?php _e("Enter your phone number", "tokheim"); ?&gt;",
          fieldemail:{ required:"&lt;?php _e("Please enter an email address", "tokheim"); ?&gt;", email:"&lt;?php _e("Email is not valid", "tokheim"); ?&gt;" },
          fieldcontactmethod:"&lt;?php _e("Select an option", "tokheim"); ?&gt;",
          fieldrelocate:"&lt;?php _e("Select an option", "tokheim"); ?&gt;",
          fieldcomments:"&lt;?php _e("Enter your comments", "tokheim"); ?&gt;"
  
      },
  
      submitHandler: function() { 
          sendFormVacancy(); 
      }
  
  });
  </code></pre>
  
  <p>The jQuery validate plugin I am using is:
  <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="nofollow">http://bassistance.de/jquery-plugins/jquery-plugin-validation/</a></p>
  
  <p>The AJAX form submit script I am using is:
  <a href="http://malsup.com/jquery/form/" rel="nofollow">http://malsup.com/jquery/form/</a></p>
  
  <p>Now, I could simply submit this with AJAX the 'manual' way...BUT, the reason I am using this plugin, is because it handles file uploads via AJAX, which is the functionality I need.</p>
  
  <p>Any help would be greatly appreciated. I'm pulling my hair out!</p>
  
  <p>Could it be to do with each plugin binding to the form in some way and locking out the other?</p>
  
  <p>Thanks,
  Michael.</p>