Ajax :: Checking If Textbox Is Invalid Or Valid?

I have a signup form that the user fills out. Among other textboxes, there is an Email textbox, and a Password textbox. These are the two I want to do some Ajax work on.

Right now I'm choosing to go the onblur approach, but is there something better? I'd really like Ajax to go into affect when the user has stopped typing. I know there is key up and key down, but that won't really be too good for what I'm doing. Besides that though, this isn't the real problem.

My problem is this, when the onblur function is called, I want it to return text to a specific element on my HTML page depending on if the fields are valid or not.

Here's the part of my HTML page:

<div id="signuperrorsection">
<span class="error"></span>
<span class="valid"></span>
</div>

Anyway, if the email address for example is valid, I want the valid class to get the response. If it's invalid I want the error class to get the response.

Here's my javascript (right now I'm only trying to implement the Email field):

function checkErrors(str)
{
if (str=="")
{

[Code]....

Now the way I have this set up now, both classes are going to get the text, correct? Well I of course don't want that. I don't know how to have it set up so that only one class gets the response depending on what the result is.