title: Jquery: Error test after Ajax function
body: <p>Again, I have tried searching to prevent a duplicate but I think this error is due to my poor Jquery level.</p>
  
  <p>My registration form uses the following Jquery:-</p>
  
  <pre><code>$(document).ready(function() {
      $('form#registration').submit(function() {
          $('form#registration .error').remove();
          var hasError = false;
          $('.requiredField').each(function() {
              if($.trim($(this).val()) == '') {
                  var labelText = $(this).prev('label').text();
                  $(this).parent().append('&lt;span class="error"&gt;You forgot to enter your '+labelText+'&lt;/span&gt;');
                  $(this).addClass('inputError');
                  hasError = true;
              } else if($(this).hasClass('email')) {
                  var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                  if(!emailReg.test($.trim($(this).val()))) {
                      var labelText = $(this).prev('label').text();
                      $(this).parent().append('&lt;span class="error"&gt;You have entered an invalid '+labelText+'&lt;/span&gt;');
                      $(this).addClass('inputError');
                      hasError = true;
                  } else {
                      $.ajax({
                          type: "POST",
                          data: "email="+$(this).attr("value"),
                          url: "emailexists.php",
                          context: this,
                          success: function(data) {
                              if(data == 1) {
                                  $(this).parent().append('&lt;span class="error"&gt;This email already exists on file&lt;/span&gt;');
                                  hasError = true;
                              } 
                          }
                      });             
                  }
              } else if($(this).hasClass('password')) {
                  var regx = /^[A-Za-z0-9]+$/;
                  if(!regx.test($.trim($(this).val()))) {
                      $(this).parent().append('&lt;span class="error"&gt;Password can only contain alphanumerica characters A-Za-z0-9&lt;/span&gt;');
                      hasError = true;
                  } 
                  var passlen = $.trim($(this).val().length);
                  if(passlen &lt; 7) {
                      $(this).parent().append('&lt;span class="error"&gt;Password must be at least 7 characters in length&lt;/span&gt;');
                      hasError = true;
                  }
              } else if($(this).hasClass('cpassword')) {
                  if($(this).val() != $('#password').val()) {
                      $(this).parent().append('&lt;span class="error"&gt;Your passwords do not match&lt;/span&gt;');
                      hasError = true;
                  }
              }
          });
  
          **if(!hasError) {
              var formInput = $(this).serialize();
              $.post($(this).attr('action'),formInput, function(data) {
                  $('form#registration').slideUp("fast", function() {                
                      $(this).before('&lt;p class="tick"&gt;Thank you for registering with &lt;font style="color:#ddbb88;"&gt;racingdatasheets.com&lt;/font&gt;. You should receive a confirmation email shortly.&lt;/p&gt;');**
                  });
              });
          }
  
          return false;   
      });
  });
  </code></pre>
  
  <p>My issue is the error test at the bottom which returns false if all other tests pass before my Ajax emailexists function returns a possible error. (I added 2 alerts and could see the error check at the bottom testing false prior to the emailexists setting hasError true. Am i just misunderstanding the asynchronous nature of Ajax and doing this all wrong?</p>
  
  <p>Any help will be appreciated.</p>