title: How to restrict serverside validations till completion of client side validations jquery ajax
body: <p>I am using ajax request for serverside validations at the same time i am using client side validations using jquery validate but i am getting both the validations at a time i want to restrict server side validation till client side validation is complete</p>
  
  <p>my jquery code </p>
  
  <pre><code>$(document).ready(function(){
      $("#userForm").validate({
          rules: {
             firstName: "required",
             lastName: "required",
          },
          messages: {
              firstName: "FirstName is required",
              lastName: "LastName is required",
          },
          errorPlacement: function(error, element) {
              // error.insertAfter("#some");
              error.insertAfter(element.siblings("span"));
          }
      });
      $("#submit").click(function(){
      $("form").valid();
  });
  
  });
  function validateAddUser(){
      $.ajax({
             type: "POST",
             url: "validateAddNewUser.php",                  
             data: $("#userForm").serialize(),
             success: function(msg){
                 if(msg)
                 {
                     $('#messageConatiner').html(msg);
                 }
                 else
                 {
                     $('#messageConatiner').html(msg);
                 }
             }   
       });
  }
  </code></pre>
  
  <p>HTML Code</p>
  
  <pre><code>&lt;div id="messageConatiner"&gt;&lt;/div&gt;
  &lt;div id="formtb"&gt;
  &lt;form action="validateAddNewUser.php" method="POST" id="userForm"&gt;
  &lt;table width="100%" border="0" cellspacing="6" cellpadding="1"
      class="tabcont"&gt;
      &lt;tr&gt;
          &lt;td width="47%" align="right"&gt;
              *First Name:
          &lt;/td&gt;
          &lt;td width="53%"&gt;
              &lt;input type="text" id="firstname" name="firstName"/&gt;
              &lt;br /&gt;
              &lt;span&gt;&lt;/span&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td align="right"&gt;
              * Last Name:
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input type="text" id="lastname" name="lastName"/&gt;
              &lt;br /&gt;
              &lt;span&gt;&lt;/span&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td align="right" colspan="2"&gt;
              &lt;input name="addNewUser" type="button" class="submit" id="submit" value="Submit" onclick="validateAddUser();" /&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>