Using The blur Event To See If An Input Field Is Empty

[stevenmw]

I know very little about JavaScript. I am disecting a script that uses a seperate php file to check if a username exists, and then uses ajax to display whether the name is available or not. (I'm posting this thread in 'JavaScript frameworks' because it is Jquery based.)

<script language="javascript">
$(document).ready(function()
{
$("#username").keypress(function()
{
$("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
$.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
{
 if(data=='no') //if username not avaiable
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{ 
$(this).html('This User name Already exists').addClass('messageboxerror').fadeTo(900,1);
});  
}
else
{
$("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
{ 
$(this).html('Username available to register').addClass('messageboxok').fadeTo(900,1); 
});
}   
});
});
});
</script>

I'm going to expand this script to include more than one field, but I want to use the blur event to check each input fields to see if they're empty after they lose focus.

If anyone could explain a way I could this I would really appreciate it. (I understand this question may seem poorly written out, but I couldn't really think of a better way to explain or structure it.)

Also, if anyone knows a better way to go about this script in general, I'd appreciate tips. For instance, I was wondering if there was a way to write one function that checks the user_availability.php and apply that one function to my multiple input fields? Or do I have to write a seperate function for each field?


Thanks.