$(function(){
        $("#username input").keyup(function(){
                                       
            var $input = $(this);
                                             
            if ($.trim($input.val()).length > 4){
                
                var data = $input.val();
                $input.parent().children("#error").html('<img src="loading.gif" width="16" height="16" alt="Checking" />');
                
                $.get("check.php", {check: "username", userData: data}, function(response){
                    $input.removeClass();
                    if (response == "available"){
                        $input.addClass("available");
                        $input.parent().children("#error").html('<span class="green">Username available</span>');
                    } else {
                        $input.addClass("taken");
                        $input.parent().children("#error").html('<span class="red">Username taken</span>');
                    }
                });
            } else {
                if ($.trim($input.val()).length != ""){
                    $input.removeClass();
                    $input.parent().children("#error").html('<span class="red">Username too short</span>');
                } else {
                    $input.removeClass();
                    $input.parent().children("#error").html('');
                    return
                }
            }
        });
    });

if ($.trim($input.val()).length > 4){ = This will check if the value of the text field is larger than 4 characters. You could also simple send the data to the php file and let the php check if it is long enough but this requires more server resources.

if (response == "available"){ = The php file will echo available if the username hasn't been taken. If the user has been taken it will echo taken.

if ($.trim($input.val()).length != ""){ = If the text field character length is less than 4 it will display a message telling the user that the username is too short.

CSS

input[type=text] {width: 140px; height: 26px;}
    
.available {background-color: #DFB; border: 2px solid #60BB04;}
.taken {background-color: #FFC6C6; border: 2px solid #DF0000;}
.red {color: #C00;}
.green {color: #60BB04;}
    
#content {width: 400px; margin-left: auto; margin-right: auto; border: 1px solid #E2E2E2; padding: 7px;}
form {padding: 2px;}