title: How to wait for ajax validation to complete before submitting a form?
body: <p>Having a problem where the form submits before the validateUsername function has a chance to complete the username check on the server-side.</p>
  
  <p>How do I submit the form only after the validateUsername function completes?
  Hope this is clear...</p>
  
  <pre><code>form.submit(function(){
      if (validateUsername() &amp; validateEmail() &amp; validatePassword()) {
          return true;
      } else {
          return false;
      }
  });         
  
  function validateUsername(){            
      usernameInfo.addClass("sign_up_drill");
      usernameInfo.text("checking...");
      var b = username.val();
      var filter = /^[a-zA-Z0-9_]+$/;     
      $.post("../username_check.php",{su_username:username.val()},function(data) {
          if (data=='yes') {
              username.addClass("error");
              usernameInfo.text("sorry, that one's taken");
              usernameInfo.addClass("error");
              return false;           
          } else if (!filter.test(b)) {
              username.addClass("error");
              usernameInfo.text("no funny characters please");
              usernameInfo.addClass("error");
              return false;   
          } else {
              username.removeClass("error");
              usernameInfo.text("ok");
              usernameInfo.removeClass("error");      
              return true;    
          }
      });             
  }   
  </code></pre>