title: jQuery Validate input on blur and ajax posting
body: <p>I have a form that is handled by ajax and uses jQuery validate for validation. It's working as intended but when I add field validation on blur of form fields, it stops working correctly. It stops posting via ajax and instead just goes to the php file used to process ajax. It also doesn't seem to handle the file upload properly, says there isn't one when there is. Going back via the browser after a failed post and resubmitting then works okay though. So I'm not sure what's going on.</p>
  
  <p>Here's the JS:</p>
  
  <pre><code>    // highlight input fields on blur - This is what stops it working
      $('.input-field').on('focusout', function(){
          $(this).parents('form').validate({
              onfocusout: function(element) {
                  this.element(element);
              },
              onkeyup: false
          });
      });
  
      // Ajax form submit/validation
      $(document).on('click', '.form-submit', function(e){
  
          // Whichever form sent it..
          var $thisForm = $(this).parents('form');
  
          // Validate it...
          $thisForm.validate({
              ignore: '',
              rules: {
                  upload: {
                      required: true
                  }
              },
              submitHandler: function(form) {
  
                  var formData = new FormData($thisForm[0]);
  
                  // Show the loading spinner
                  $thisForm.addClass('loading').find('.padded').remove();
  
                  e.preventDefault();
  
                  $.ajax({
                      type: "POST",
                      dataType: "json",
                      data: formData,
                      processData: false,
                      contentType: false,
                      url: $thisForm.attr('action'),
                      success: function(data) {
                          // When we're done, remove spinner and add the thank you message
                          $thisForm.parents('aside').addClass('textcenter padded').html(data.message);
                          $('.loading').removeClass('loading');
                      }
                   });
              }
          });
      });
  </code></pre>