Here you can test drive RestrictedTextField's built-in types. Select a type from the dropdown menu and use the checkboxes to further customize the configuration.
If the pattern attribute is disabled, RestrictedTextField uses its own validation implementation: validation is performed on each keystroke and on blur, and is done regardless of the state of the "Discard invalid keystrokes" checkbox. Event listeners flash the text field's border when a keystroke is discarded, and color its border solid orange if an invalid character makes it into the field.
Note that if using the pattern attribute, you will lose Luhn validation on credit card types and the Luhn type, as Luhn calculations cannot be performed with regular expressions. Patten mode is meant to be a pure HTML5 validation.
The demo initializes RestrictedTextField with a logging function, so you can open your browser's console to view events in real time.
RestrictedTextField provides a function class called RestrictedTextFieldConfig
. This class
contains an add
method which accepts three arguments:
id
: The identifier you will use to access your typefullRegex
: A regular expression which describes what valid data looks like when input is finishedpartialRegex
: A regular expression which describes what valid data looks like while it's being
entered -- partially-entered data. Data which passes this regular expression will fail evaluation by fullRegex
.
Create a type which restricts input to the characters a, e, i, o and u.
This is a simple type: the presence of a character at position X does not require a character to be present at position X + Y.
Therefore, any value in the text field could be regarded as the complete input. For this reason, we provide a regular
expression for fullRegex
and no value for partialRegex
.
var cfg = new $.fn.RestrictedTextFieldConfig();
cfg.addType( "vowels", /^[aeiou]*$/, null );
Create a type which recognizes the addition of two integers, such as 2+1.
This is trickier than the previous example. In the first example, you could input letters in any quantity and any order. Any keystroke within the set of allowed characters passed validation by the regular expression.
That's not the case here. This type requires an integer, followed by a plus sign, followed by another integer. The regular
expression for that is ^\d+\+\d+$
. Because validation occurs on every keystroke, you can't validate against
that regular expression. When the user enters the first character, '2', that does not satisfy the regular expression. In
order for the partial input to be accepted, you must provide a value for partialRegex
which describes what
valid data looks like while it's still being entered. Valid partial input could be:
The regular expression for that is /^\d+\+?$/
. Putting it all together, we get:
cfg.addType( "additionExpr", /^\d+\+\d+$/, /^\d+\+?$/ );
I hope you found the code behind these examples helpful. Please consider donating to this project to show your support. Your support is greatly appreciated, and it motivates me to keep this project alive and to release more open source software.
https://paypal.me/KurtisLoVerde/10