This text field has been configured to allow invalid text to remain in the field. When the invalid keystroke
fails validation, the validationFailed
event fires. When the invalid data is removed, the
validationSuccess
event fires. The validationFailed
listener turns the border red,
and it remains red until the validationSuccess
listener turns it off. When the blur event
fires, the field is validated again, and one of these two events will fire.
The remaining examples work differently. Instead of allowing invalid input to remain in the field, the
invalid keystroke is ignored, so the field never has an invalid value. Events work differently in this
scenario. When an invalid keystroke is ignored, the inputIgnored
event fires. The
validationFailed
event does not fire in response to an invalid keystroke. The
inputIgnored
listener flashes the border of the textbox to alert the user that the
keystroke was ignored. When the blur event fires, the field is validated again, and either the
validationFailed
or validationSuccess
event will fire.
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 throw down any number of letters in any quantity and any order. 'a' was valid, as was 'uo', 'iiiuuuuuiie', etc. 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+\+\d+$/, /^\d+$|^\d+\+$
. Putting it all together, we get:
cfg.addType( "additionExpr", /^\d+\+\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/5