title: Jquery Validate then .onsubmit function
body: <p>I am using Jquery validation in a form and also an Ajax function in a .on(submit) code.</p>
  
  <p>The problem is even when the validation is wrong the .on(submit) function still runs.</p>
  
  <p>Is there any type of "if validation success" code to add to the validation code to put the .on(submit) code in so it will only run when the form is correct and validated?</p>
  
  <p>this is the .on(submit) function</p>
  
  <pre><code>        $('#valform').on('submit', function (e){
      e.preventDefault();
      $.ajax({
      type: "POST",
      url: "&lt;?php echo MAXINBOUND_PLUGIN_URL ?&gt;/php/localProxy.php",
      data: $('#valform').serialize(),
      success: function (response) {
              alert('Great!');
               // do something!
      },
      error: function () {
              alert('There was a problem!');  // handle error
      }
          });
          });
  </code></pre>
  
  <p>and this is the validation code</p>
  
  <pre><code>    $("#valform").validate({
      invalidHandler: function(form, validator) {
          success: function (response) {
          var errors = validator.numberOfInvalids();
  
          if (errors) {
              $("#error-message").show().text("Please correct the required field(s)");
          } else {
              $("#error-message").hide();
          }
      },
      messages: {
          agree: {
              required: ""
          },
          phone1: {
              required: ""
          },
          address1: {
              required: ""
              },
      },
      rules: {
          agree: {
              required: true,
          },
          phone1: {
              required: true,
              phoneUS: true
          },
          Address1: {
              required: true,
              addr: true,
              },
  
          },
  
       });
  </code></pre>