Home
I would like a tool to validate user input (in a text box), and traditionally you can use a custom function or use a Regular Expression to do just that. In the case of a custom validator you you can do just about any thing, but the simplest is to wait until the input focus is lost and check if the input is valid and similarly for a regular expression.
But suppose we want the following
- Validate text entered in input box (at the end)
- If the input so far (partial input) is valid but not complete
- Let use type in only valid characters
- Give user hint on what he or she can type
- Auto complete if the user has no choice in what they can type next (smart auto-complete)
Nice to have:
- Support fixed field input such as date, credit card number, credit card expiry date ...
- Allow you to move the text cursor in the input box and do a good job of deleting and adding characters and try not to mess up the input while keeping the input valid (this is rather a complex requirement and hard to implement well). The trick here is to maintain the principle of least surprise for the user, i.e. what the computer does should make sense and not confuse the user.
A custom validator can certainly do all of the above but it would be hard to implement.
A regular expression matcher will not help with anything except the the very first bullet point, because the JavaScript RegExp requires the entire input before it will validate.
Although JavaScript's own RegExp will not help, but I will show you how a custom regular expression (incr-regexp-package) library can help with all of the above points.
Now that I have explained the reason for this package the following are the main capabilities of incr-regexp-package:
- Custom implementation of regular expression matcher
- Supports almost all the capabilities of JavaScript RegExp language (no Positive and negative lookaheads)
- Supports matching one character at a time (to support matching as you type)
- Tells you if the matching is complete or requires more input
- Tells you the next character or set of characters (one of the folling) it expects
- Provides an input mask for the remaining characters (following the input)
- returns a list of hints for the completion of the input
This package is not meant to replace Javascript's regular expression capability. Its purpose is to support some special cases that I have not found in any RegExp library. You can see the demo using the package to build a input validator.
Demo here. I guarantee, that the demo will send any data anywhere, will not mess up you browser, show any advertising or do any other obnoxious stuff. Everything runs within the browser and uses the github server to download html and scripts. One note: If you use the regular expression visualizer, the demo uses a site https://regexper.com/
- Note: The demo is a good way to try out your own regular expression and to learn about regular expression matching
JavaScript has a very fast robust Regular Expression capability. Indeed it is so useful and fast it is used in most string processing applications, parsers... Using regular expressions is usually much faster than iterative character by character processing. Secondly it is quite challenging to build a robust regular expression package. So what foolishness inspired me to build a regular expression parser in JavaScript and why would anybody want to use this. Firstly, this is not intended to be a replacement for JavaScript RegExp. The primary purpose of this package is to do input validation (as you type).
To explain how this regular expression matcher works we have to step back a bit and explain how most matchers work. I will do that with an example.
Suppose we have the following regular expression:
/Yes|No|Nada|Yep/
The first thing RegExp does is to parse the expression and turn it into a finite state machine
