What's the best way of validating an HTML text input as it's typed? All ways I know of doing it has some drawbacks:
you only have access to the input's old value, not the new one. Also, some events (like cutting/pasting using the mouse) won't be detected.
only works when the input loses focus.
- This question proposes a solution, where you use polling to watch for property changes. In principle, it's possible to validate the new value in the callback, then revert to the old one if invalid. However, besides requiring polling, I'm not sure it's free from race conditions.
- This article suggests using browser specific features when present, falling back to polling if none is available. Looks like the best approach so far.
- [Update] as pointed in the answers,
give access to the value after update. However, not only it doesn't work for mouse cut/paste, but also fails if you press and hold a key, only releasing after a lot has been entered. Or, if combining
to save/restore the old value, it breaks if the user types too fast.
None of the solutions above are error free or really safe cross-browsers. Are there better solutions out there, either ready-to-use or in-the-making? Seems to be a common problem, I've attempted to answer similar questions
recently, with no success, and I'm interested in an answer as well.
(A good argument against
this practice is also welcome, in case there are new problems that would rise if this validation were implemented; however, that seems a common thing in other languages, so I doubt it is a bad thing to want)