Use onkeyup(textfield) or onclick(button) for registration form validation?

[slyte33]

I don't really need to post any code to get help with this, but I can explain what I am talking about.

I've heard using onkeyup could cause problems, but I'm unsure on this.

 

Basically, i have a registration form, but let's just concentrate on a simple "Username" field and a "Register" button to keep this simple.

Let's say the username must be at least 4 characters long.

 

Using onkeyup:

<input type='text' id='username' name='username' onkeyup="validate();"><span id=error1></span>

The user enters a username, beside the usernames textfield is a <span id=error1> tag. onkeyup event obviously will update the span id as the user types. If the username is less than 4 characters, it will display "Too short, 4 characters minimum".

 

Using onclick: 

<input type="submit"  onClick="validate();" value="Register">

You click register... it updates the span tag if there are any errors, unlike the onkeyup event which does it without clicking submit.

 

So my question is, which would be a better choice? Or is it whatever I'd like to use? I've just heard about onkeyup causing problems with some people.

 

All help would be much appreciated

 

[Adam]

I would assign the event to the submit, but not onclick of the submit button. Assign it to the actual form onsubmit="..." event, otherwise the user could press enter to submit the form and it wouldn't be validated. It's then up to you if you want to add further validation to individual inputs as they enter text, but I would personally use a timer to delay the validation by about 2-3 seconds after they press a key, and reset the timer every time the event is called. You'd also want to bind it to the onblur event in this case. It just makes the process feel a lot smoother, not big red error messages popping up after you've entered the first character.