Validation - Message while remote and sucess

[XRS]

Hello,

 

After made my first form with success validations, now I have a problem that I would like get some help.

I made two remote scripts to check if username and e-mail exists in the database ( prevent duplicate registers ).

 

The script works good, but only show a message ( after X seconds ) if the user/email is already registered.

I'd like to show a "Checking.." message or a preloader gif while it runs the remote script and after that if the user is OK show a message too.

 

There are my scripts:

 

 

This is my templating for showing errors:

$.validator.setDefaults(
{
	showErrors: function(map, list) 
	{
		this.currentElements.parents('label:first, .controls:first').find('.error').remove();
		this.currentElements.parents('.control-group:first').removeClass('error');
		
		$.each(list, function(index, error) 
		{
			var ee = $(error.element);
			var eep = ee.parents('label:first').length ? ee.parents('label:first') : ee.parents('.controls:first');
			
			ee.parents('.control-group:first').addClass('error');
			eep.find('.error').remove();
			eep.append('<p class="error help-block"><span class="label label-important">' + error.message + '</span></p>');
		});
		//refreshScrollers();
	}
}); 

This is my validation script:

$(function()
{
	// validate signup form on keyup and submit
	$("#registerform").validate({
		rules: {
			firstname: "required",
			lastname: "required",
			username: {
				required: true,
				minlength: 3,
                remote:{
                    url: "inc/core/check_user.php",
                    type: "post",
                    data: {
                        username: function(){
                            return $( "#username" ).val();
                        }
                    }
                }
			},
			password: {
				required: true,
				minlength: 5
			},
			confpassword: {
				required: true,
				minlength: 5,
				equalTo: "#password"
			},
            scode: {
                required: true,
                minlength: 4,
                maxlength: 6,
                digits: true
            },
            scodeconf: {
                required: true,
                minlength: 4,
                maxlength: 6,
                digits: true,
                equalTo: "#scode"
            },
			email: {
				required: true,
				email: true,
                remote:{
                    url: "inc/core/check_email.php",
                    type: "post",
                    data: {
                        email: function(){
                            return $( "#email" ).val();
                        }
                    }
                }
			},
			topic: {
				required: "#newsletter:checked",
				minlength: 2
			},
			agree: "required",
            address: "required",
            zipcode: "required",
            city: "required",
            state: "required",
            country: "required",
            data: "required",
            age: "required"
		},
		messages: {
			firstname: "Please enter your First Name",
			lastname: "Please enter your Last Name",
			username: {
				required: "Please enter a username",
				minlength: "Your username must consist of at least 3 characters",
                remote: "Username already exists. Please choose another."
			},
			password: {
				required: "Please provide a password",
				minlength: "Your password must be at least 5 characters long"
			},
			confpassword: {
				required: "Please provide a password",
				minlength: "Your password must be at least 5 characters long",
				equalTo: "Please enter the same password as above"
			},
			email:{
			 required: "Please enter a valid email address",
             remote: "That e-mail is already registered with us"
             },
			agree: "Please accept the Terms of Service",
            address: "Please insert your address",
            zipcode: "Please insert your zip code",
            city: "Please insert your city",
            state: "Please choose your state",
            country: "Please choose your country",
            data: "Please confirm all information above is correct",
            age: "Please confirm that you are able to sell or buy products online.",
            scode: {
                required: "Please insert a security code",
                minlength: "Your security code needs to have at least 4 digits",
                maxlenght: "Your security code can have a maximum of 6 digits",
                digits: "Your security code only can have digits"
            },
            scodeconf: {
                required: "Please insert a security code",
                minlength: "Your security code needs to have at least 4 digits",
                maxlenght: "Your security code can have a maximum of 6 digits",
                digits: "Your security code only can have digits",
                equalTo: "Please enter the same security code as above"
            },
		}
	}); 

And my checking script ( this is for username, but it's the same thing only change the data: 

<?php
if(isset($_POST['username'])){
    include("/config.php");

    $username = validar($_POST['username']);
    $query = mysql_query("SELECT * FROM utilizadores where username='$username'") or die(mysql_error());
    $row = mysql_num_rows($query);
    if($row == "0"){
        echo "true";
    }else{
        echo "false";
    }}
?> 

Now, my question is, how to show a success message ( if the username is available ) and how to show a loading message ( while the remote script is running ).

Can anyone help me ? Thanks!