title: Validate and submit form with no page refresh
body: <p>I'm using jQuery validation and processing the form via ajax so I can avoid a page refresh. The problem I am running into is that I can't figure out where to place the ajax code in the validation function so that the form won't send data until it's been validated.</p>
  
  <p>For example: </p>
  
  <pre><code>$('#ticket_purchasing').validate({ // initialize the plugin
      rules: {
          firstname: {
              required: true
          },
          lastname: {
              required: true
          },
          phone: {
            required: true,
            digits: true,
          },
          email: {
            required: true,
            email: true
          },
          address: {
            required: true
          },
          city: {
            required: true
          },
          state: {
            required: true
          }
  
      },
      invalidHandler: function (event, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
          var message = "All fields in red must be filled*";
            $("div.error-message span").html(message);
            $("div.error-message").show();
          } else {
            $("div.error-message").hide();
        }
      },
      submitHandler: function (form) { // for demo
        // Do stuff here
      }
  });
  
  $('form#ticket_purchasing').on('submit',function(e) {
        //Send the serialized data to mailer.php.
        $.ajax({
            url:'ticket-purchase.php',
            data:$(this).serialize(),
            type:'POST',
            success:function(data){
              console.log(data);
              // $('#sponsorship_request').slideUp();
              // $('#ticket_purchasing').hide();
              // $('.seats-form').fadeIn(1000);
            },
            error:function(data){
              $("ticket_purchasing .error").show().fadeOut(5000); //===Show Error Message====
            }
        });
        e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===
        //$.post("mailer.php");
        //Take our response, and replace whatever is in the "form2"
        //div with it.
        // $('#form2').show();
    });
  </code></pre>
  
  <p>As you can see above I have both functions separated from each other, and because of this the form is submitting the data (which emails the information) even though it's not been validated yet. I tried using form.submit(); as show in the validator documentation, and putting the ajax code in there, but it was a no go with errors I couldn't solve.</p>
  
  <p>Advice? I'm probably going at this all wrong haha.</p>
  
  <p>Edit: Just added html for the form: <a href="https://gist.github.com/adrianrodriguez/26b6beee8bf5ba85a8ce" rel="nofollow">https://gist.github.com/adrianrodriguez/26b6beee8bf5ba85a8ce</a></p>
  
  <p>To be clear, the form works fine without the validation portion, meaning I can submit and collect the data without a page refresh without the use of the validation plugin.</p>