I finally found some time to get started with jQuery on a project.  My first task is to learn the form validation, so I've setup a very simple form with the validate plugin, and also an ajax call to check to see if a username is unique.

The validation works, as does the username check.  My problem lies in the error messages that are displayed.  On username, I have 2 rules in place:

username : {
  required: true,
  rangelength: [5,50]
}

and then in messages I have 2 corresponding messages:
username : {
   required: "Please enter your username.",
   rangelength: "Username must be between 5 and 50 characters."
}

All of this works fine.  Below my rules and messages I have the ajax call to my function.  If the username count returned is 0, it's unique and they can submit.  If it's not 0, then it displays a message in a span:

if (response == 0) {
   $('#usernameResponse').css('display', 'none');
   $('#submit').attr('disabled','');
 } else {
   $('#usernameResponse').css('display', 'inline');
   $('#submit').attr('disabled','disabled');
}

The error messages for the standard validate or going into label.error.  The error message for the ajax response goes into the span id="usernameResponse".

The problem is that I can easily get both messages to display, when it really should only be one, the other or none.  How can I get the ajax error into the corrected label.error, or how can I direct the validation error into the #usernameResponse span (so I'd end up with an either/or/none).