Question: I have some information to enter in a text box. The data is structured and only some sequences are valid. For a phone number, for instance, a letter such as `A` is invalid.

So should I intercept keyboard events and prevent typed letters from reaching the text box, or should I draw some red squiggly lines (or another visual cue) to let my user know the letter is not acceptable? Which is a better user experience?

Answer: 
Overriding a user's control of his or her computer will always be an interruption, and often be perceived as an invasion, of that user's workflow. The web site "isn't supposed to" have control of our computers, so exerting such control will be at least a little alarming.

That said, you broach a really important topic, being the importance of letting a user know their entry is invalid before they fill out an entire set of fields and submit them.

The approach I've found to be the least-intrusive but provide the quickest turn-around response is the flow below. 

![alt text](https://i.stack.imgur.com/VxAhU.png)

Essentially, wait for them to fill out their first field, then as they click/tab around a new field (or a field that has been invalidated), check the field that was just completed. If the field that was just completed is valid, print an unobtrusive "good" icon next to it (green, checkmark, happy face, you get the idea). If it fails the validation rules, discretely print a "bad" icon (red, "X", etc.) and a short line about what failed. 

But remember, do not interrupt their workflow: 

* No pop-ups
* no overlays

When they're finished with the field they moved to, they'll either go back to the invalid field or move on and go back later. Either way, they'll see that they have an edit to make but can do it on their own time.

In the end, they'll have a completely valid form before ever submitting, which means 

1. They'll only have to submit once
2. They don't spend time getting mad or frustrated when their submission "fails"
3. They'll like your site more
4. Everyone will have cake
Being on both ends of using a form, here are some guidelines I prefer:

* User inputs should hardly ever be prevented. Meaning if I type the letter 'A' in a phone number field, I would expect to see that 'A'.
* I begin my text field validation on a `onBlur()` event, and no sooner than that. This gives the user a chance to fix that mis-typed 'A' before I show an error message. Allowing the user to correct an error while still in the input field provides one less chance for an obtrusive "hey, you messed up, dude" kind of message.