title: How to send an ajax validation only if jQuery validation plugin succeed?
body: <p>I used jQuery validation plugin to validate form fields. Now I want to send an ajax request only if the fields are valid, which means after jQuery validation plugin succeed.</p>
  
  <p>JavaScript: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
     $("#form").validate({
         errorPlacement: function(label, element) {
          label.addClass('arrow');
          label.insertAfter(element);
          },
          wrapper: 'span',
         
         rules: {
             email: {
                 required: true,
                 email: true
             },
             name: {
                 required: true,
                 minlength: 5
             },
             password: {
                 required: true,
                 minlength: 6
             },
             rePassword:{
                 required: true,
                 minlength: 6,
                 equalTo: "#password"
             },
             birthDate:{
                 required: true
             },
             aboutYou:{
                 required: true
             }
             
         },
         messages:{
             email: {
                 required: "this field is required!",
                 email: "please enter a valid email!"
             },
             name:{
                 required: "this field is required!",
                 minlength: "name needs to have at least 5 chars!"
             },
             password:{
                 required: "password is required!",
                 minlength: "password needs to have at least 6 chars!"
             },
             rePassword:{
                 required: "rePassword is required!",
                 minlength: "rePassword needs to have at least 6 chars!",
                 equalTo: "passwords don't match!"
             }
         }
     }); 
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Register&lt;/title&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;script src="includes/jquery-1.11.3.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/css.css"&gt;
          &lt;script src="js/jquery.validate.js"&gt;&lt;/script&gt;
          &lt;script src="js/jquery.validate.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/registerForm.js"&gt;&lt;/script&gt;
          &lt;?php 
              require_once'includes/DAL.php';
          ?&gt;
          &lt;script&gt;
             $(function(){
                  $( "#form" ).submit(function(){
                      // run this code only if validation plugin succeed?
                      $.ajax({
                          method: "post",
                          url: "API.php", 
                          data:{email: $("#email").val(), name: $("#name").val(), password: $("#password").val(), rePassword: $("#rePassword").val(), birthDate: $("#birthDate").val(), aboutYou: $("#aboutYou").val()},
                          success: function(result){$("#div1").html(result);
                      }});
                  });
              });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;form method="post" id="form"&gt;
              &lt;label&gt;Email&lt;/label&gt;&lt;br/&gt;
              &lt;input type="text" name="email" id="email" placeholder="Enter your email"/&gt;&lt;br/&gt;
  
              &lt;label&gt;Name&lt;/label&gt;&lt;br/&gt;
              &lt;input type="text" name="name" id="name" placeholder="Enter your name"/&gt;&lt;br/&gt;
  
              &lt;label&gt;Password&lt;/label&gt;&lt;br/&gt;
              &lt;input type="password" name="password" id="password" placeholder="Enter your password"/&gt;&lt;br/&gt;
  
              &lt;label&gt;re-Password&lt;/label&gt;&lt;br/&gt;
              &lt;input type="password" name="rePassword" id="rePassword" placeholder="Repeat password"/&gt;&lt;br/&gt;
  
              &lt;label&gt;Birth Date&lt;/label&gt;&lt;br/&gt;
              &lt;input type="date" name="birthDate" id="birthDate"/&gt;&lt;br/&gt;
  
              &lt;label&gt;About yourself&lt;/label&gt;&lt;br/&gt;
              &lt;textarea name="aboutYou" id="aboutYou" placeholder="About yourself..."&gt;&lt;/textarea&gt;
  
              &lt;input type="submit" id="submit" value="Register!"/&gt;
              &lt;div id="div1"&gt;&lt;/div&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>