Question

We have an asp.net web application and we currently use the update panel on user registration page to check if user exists. There are a few issues in doing this

1- update panel is slow

2- when a user tabs to the next textbox the focus is lost so user has to click manually back at the box, this is even worse when the update panel is in a popup

3- even though it does not refresh the page the page load methods are still called, when I only need to call the event fired.

We are using web forms as opposed to asp.net mvc

Our question is what is the best method to do this operation: check if username already exists.

client side: Regular JavaScript, JQuery, JSON, other possibilities?
Server side to check if user exists: another aspx page, web service, other possibilities?

What other techniques are possible or do you guys use?

Thanks in advance..

Answer 1

Here is an example, from the client side: http://jsfiddle.net/HackedByChinese/XPd2G/2/

I created a simple plugin called delayedkeyup, which fires an event after the user stops typing after several milliseconds. When the event does fire, I make an ajax call (in the example, it’s a mocked JSON endpoint; you’d replace this with a call to your web service, or page method marked with WebMethod, which does a simple DB lookup). The ajax call returns a JSON message indicating whether or not the email is valid.

I add a visual indicator as to the result (green outline is good, red is bad). You could replace this with whatever validation scheme you use, or display a message, whatever.

Note: if you do not like the validation using delayedkeyup, you could just replace it with .blur or .change, so the lookup is done when the user clicks or tabs out of the textbox, or changes the value (respectively).

The WebMethod might look something like this:

[WebMethod]
public string ValidateEmail(string email)
{
   var valid = IsEmailValid(email); // your validation routine
   return string.Format("{{ \"validEmail\":{0} }}", valid.ToString().ToLower());
}