jQuery form validation (jQuery post)

[RyanDev]

Hi everyone,
I have a simple javascipt code, everything works great but checking the username's and email's avaibility takes too much time. Here is the code :

$('.send').click(function(){
		$(".error").hide();
		var hasError = false;
		var mail = $('#mail').val();
		var user = $('#user').val();
		var pass = $('#pass').val();
		var phone = $('#phone').val();
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
		var telReg =/^[0-9]{8,15}$/;
		
		if(mail == '') {
			$("#mail").addClass("errorbox").after('<span class="error"> <br/>Lorem lipsum dolor sit amet</span>');
			hasError = true;
		}else if(!emailReg.test(mail)) {
			$("#mail").addClass("errorbox");
			$("#mail").after('<span class="error"> <br/>Lorem lipsum dolor sit amet</span>');
                        hasError = true;
		}else{
			$("#mail").removeClass("errorbox");
		}
		
		
		$.post("checkMail.php", { mail: mail },  
            function(result){
                if(result == 1){  
					   $("#mail").addClass("errorbox");
					   $("#mail").after("<span class='error'> <br/>mail unavailable</span>");
					   hasError = true;
                }
        });
		
		
		$.post("checkUsername.php", { user: user},  
            function(result){
                if(result == 1){  
					   $("#utilisateur").addClass("errorbox");
					   $("#utilisateur").after("<span class='error'> <br/>user unavailable</span>");
					   hasError = true;
                }				
        });
		
		
		if(utilisateur == '') {
			$("#user").addClass("errorbox");
			$("#user").after("<span class='error'> <br/>Lorem lipsum dolor sit amet</span>");
			hasError = true;
		}else if(utilisateur.length < 3) {
			$("#user").addClass("errorbox");
			$("#user").after("<span class='error'> <br/>Lorem lipsum dolor sit amet</span>");
			hasError = true;
		}else if(utilisateur.length > 12) {
			$("#user").addClass("errorbox");
			$("#user").after("<span class='error'> <br/>Lorem lipsum dolor sit amet</span>");
			hasError = true;
		}else{
			$("#user").removeClass("errorbox");
		}	

		if(pass == '') {
			$("#pass").addClass("errorbox").after('<span class="error"> <br/>Lorem lipsum dolor sit amet</span>');
			hasError = true;
		} else {
			$("#pass").removeClass("errorbox");
		}	
		
		if(phone == '') {
			$("#phone").addClass("errorbox").after('<span class="error"> <br/>Lorem lipsum dolor sit amet</span>');
			hasError = true;
		} else if(!telReg.test(phone)) {
			$("#phone").addClass("errorbox").after('<span class="error"> <br/>Lorem lipsum dolor sit amet</span>');
			hasError = true;
		} else {
			$("#phone").removeClass("errorbox");
		}
		
		if(hasError == false) {
			$("<div class='loading'><img src='../images/ajax-loader.gif' /> <p>Envoi en cours...</p></div>").appendTo(".connex");
				$.ajax({
					type: "POST",
					url: "activation.php",
					data: "mail="+mail+"&user="+user+"&pass="+pass+"&phone="+phone,
					success: function(html){
					$(".loading").fadeOut();
					$(".connex").hide('slow').after("Lorem lipsum dolor sit amet");
					}
				});		
		}	
		return false;
	});

The main problem is that, when the user fills up the form and clicks the send button the jQuery post hasn't enough time to check the availability and the ajax request is already sent without even checking the availability.

Thanks.

[Andrey Luiz]

Can be because your error treatment is to long.
Test these same treatment, but more concise.