title: jQuery validation submitHandler not work in $.ajax post form data
body: <p>I have Send data using <code>$.ajax</code> and validation with jQuery validation plugin like this :</p>
  
  <pre><code>&lt;div class="" id="ajax-form-msg1"&gt;&lt;/div&gt;
  &lt;form id="myform" action="load.php"&gt;
      &lt;input type="input" name="name" id="name" value="" /&gt;
      &lt;input type="hidden" name="csrf_token" id="my_token" value="MkO89FgtRF^&amp;5fg#547@d6fghBgf5" /&gt;
      &lt;button type="submit" name="submit" id="ajax-1"&gt;Send&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>jQuery(document).ready(function ($) {
      $('#myform').validate({
          rules: {
              name: {
                  required: true,
                  rangelength: [4, 20],
              },
          },
          submitHandler: function (form) {
  
              $("#ajax-1").click(function (e) {
                  e.preventDefault(); // avoid submitting the form here
                  $("#ajax-form-msg1").html("&lt;img src='http://www.drogbaster.it/loading/loading25.gif'&gt;");
                  var formData = $("#myform").serialize();
                  var URL = $("#myform").attr("action");
                  $.ajax({
                      url: URL,
                      type: "POST",
                      data: formData,
                      crossDomain: true,
                      async: false
                  }).done(function (data, textStatus, jqXHR) {
                      if (data == "yes") {
                          $("#ajax-form-msg1").html(' &lt; div class = "alert alert-success" &gt; ' + data + ' &lt; /div&gt;');
                          $("#form-content").modal('show');
                          $(".contact-form").slideUp();
                      } else {
                          $("#ajax-form-msg1").html('' + data + '');
                      }
                  }).fail(function (jqXHR, textStatus, errorThrown) {
                      $("#ajax-form-msg1").html(' &lt; div class = "alert alert-danger" &gt;AJAX Request Failed &lt; br / &gt; textStatus = ' + textStatus + ', errorThrown = ' + errorThrown + ' &lt; /code&gt;&lt;/pre &gt; ');
                  });
              });
  
          }
      });
  });
  </code></pre>
  
  <p>In action my form validate using jQuery validation but after validation not submit and not send data.</p>
  
  <p>how do fix this problem?!</p>
  
  <p>DEMO <a href="http://jsfiddle.net/g7ssanvr/1/" rel="nofollow">HERE</a></p>