RestrictedTextField jQuery Plugin Examples

The first rule of programming: never trust your data. If you're submitting a form, you still need to validate the input on the back end.

Capturing validation failures

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.

Alpha characters (A-Z, case-insensitive)

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.

Uppercase alpha characters (A-Z, case-sensitive)

Lowercase alpha characters (a-z, case-sensitive)

Alpha characters and space (A-Z, case-insensitive)

Uppercase alpha characters and space (A-Z, case-sensitive)

Lowercase alpha characters and space (a-z, case-sensitive)

Alphanumeric (letters and numbers, case-insensitive)

Uppercase alphanumeric (letters and numbers, case-sensitive)

Lowercase alphanumeric (letters and numbers, case-sensitive)

Alphanumeric and space (letters and numbers, case-insensitive)

Uppercase alphanumeric and space (letters and numbers, case-sensitive)

Lowercase alphanumeric and space (letters and numbers, case-sensitive)

Positive/negative integers

Positive integers

Negative integers

Floating-point numbers

Positive floating-point numbers

Negative floating-point numbers

Money

Positive money

Negative money

Accounting notation money (negatives expressed as (12.34) instead of -12.34)

Negative accounting notation money

Creating Your Own Types

Defining your own types requires an understanding of regular expressions. A good resource is
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp.

RestrictedTextField provides a function class called RestrictedTextFieldConfig. This class contains an add method which accepts three arguments:

  1. id: The identifier you will use to access your type
  2. fullRegex: A regular expression which describes what valid data looks like when input is finished
  3. partialRegex: 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.

Simple type: vowels

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 );


Complex type: mathematical expression

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+\+$/ );

Donations

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