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.

Defining your own types requires an understanding of regular expressions. Some good resources are:

• http://www.regular-expressions.info
• 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 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:

• An integer
• An integer followed by a plus sign

The regular expression for that is /^\d+\+?$/. Putting it all together, we get:

cfg.addType( "additionExpr", /^\d+\+\d+$/, /^\d+\+?$/ );