Search code examples
javascriptjqueryformson-the-fly

onKeyup OR onBlur is better for check username existence?


I'm struggling with my first signup form's user checking function. I cannot decide which one is better in this case: onKeyup or onBlur.

My code checks username existence in the database on the fly (before submitting the form) with ajax.

My main concerns are:

With onKeyup: if someone types in: 'John' alert instantly pops up and says its already taken, but maybe our visitor tried to type in 'JohnDoe' and never wanted to sign up with 'John'. This way every user will be able to find lots of already taken usernames by simple word guessing /typing in anything. It bothers me because it seems like a big security risk.

With onBlur: if someone types in 'John'and go further (clicks away) the alert instantly pops up and says the username is already taken. It's ok but the normal user reaction is: type in another name and wait. (Clicking out is not really obvious ) . This way the user needs to click out every time to see the current results. I think it's really really annoying (and absolutely not dumb- proof)

Which one is better? Which one you use? Or is there any better options than these two to make a user friendly "on the fly" user existence check?

Thanks!


Solution

  • I think this is in large part a matter of personal preference. I would not worry too much about exposing the existence of user names. No matter what approach you take, there will always be a way to find out which names already exist, either by submitting the form over and over again, or by repeatedly blurring the input.

    From a usability point of view, I think the blur requirement is not obvious, as you have mentioned. I would take the keyup approach, as it allows the user to make quick changes to their username based on immediate feedback.

    Performing a GET query on every keypress does, however, lead to a race condition, where the response to a keystroke may be returned after subsequent keystrokes have already been handled. So be sure to cancel or finish any previous AJAX requests before sending a new one. This can be done using an AJAX queue.

    Cancelling previous requests will also contribute to preventing the brute force username scraping scenario you mentioned, as a malicious user will have to wait for each request to complete before entering a new character. Taking network latency into account, the bruteforce attack method will not have much success harvesting large amounts of usernames.