jQuery Plugin To Restrict Text Field To Certain Characters - RestrictedTextField

RestrictedTextField is a lightweight yet useful jQuery plugin that validates and restricts text fields to specific words/characters/strings. Supported text field types: alpha, upperAlpha, lowerAlpha, alphaSpace, upperAlphaSpace, lowerAlphaSpace, alphanumeric, upperAlphanumeric, lowerAlphanumeric, alphanumericSpace, upperAlphanumericSpace, lowerAlphanumericSpace, int, positiveInt, negativeInt, float, positiveFloat, negativeFloat, money, positiveMoney, negativeMoney, accountingMoney, negativeAccountingMoney.

Basic usage:

1. Load the jQuery RestrictedTextField plugin after you've loaded jQuery library.

<script src="//code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="jquery.restrictedtextfield.js"></script>

2. Create a text field that only allows uppercase alpha characters (A-Z, case-insensitive).

<input type="text" id="txtUpperAlpha">

3. Active the plugin on the text field.

$( "#txtUpperAlpha" ).restrictedTextField({ 
  type : "upperAlpha" 
});

4. Available plugin options.

$( "input" ).restrictedTextField({ 

  // text field type
  type : "alpha" 

  // When enabled, invalid keystrokes are ignored (the value of the text field is not updated). 
  // When disabled, invalid keystrokes are not ignored.
  preventInvalidInput: true
  
});

5. Create your own types regular expressions. 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 type
• fullRegex: A regular expression which describes what valid data looks like when input is finished
• 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.

var cfg = new $.fn.RestrictedTextFieldConfig(); 
cfg.addType( "vowels", /^[aeiou]*$/, null );

6. Here's a list of events which are fired based on the state of the text field.

• inputIgnored: Fires when an invalid keystroke is ignored. preventInvalidInput must be enabled for this event to fire.
• validationFailed: Fires when an invalid keystroke is made when preventInvalidInput is disabled. Also fires if validation performed on blur() fails.
• validationSuccess: Fires when the user removes invalid data when preventInvalidInput is disabled. Also fires if validation performed on blur() passes.

Change log:

v1.4.0 (2018-02-10)

• Added support for the HTML5 pattern attribute.
• Added the ability to save the QUnit test report to a file.

v1.1.1 (2016-11-29)

• The demo page wasn't working due to an incorrect path to jquery.js. This has been fixed. Although the source code, including the JavaScript files themselves, have been updated to say 1.1.1 in their internal code comments, there is no difference in these files from release 1.1. Only demo.html has been changed.

v1.1 (2016-11-16)

• Fixes for money types
• All money types automatically format on blur: values will be updated, if necessary, to always end in a period followed by two digits
• Fixed issue with the int types which considered a negative sign by itself to be a valid value
• Relaxed the int and float types/subtypes, and added strict versions of each. The relaxed versions accept leading/trailing zeros and negative zero; the strict versions do not.
• Added a logging callback function as a configurable option
• Throws an exception if invoked on something other than an input element
• Added Selenium unit tests

---

This awesome jQuery plugin is developed by kloverde. For more Advanced Usages, please check the demo page or visit the official website.