Simple usage example of jquery.inputmask by Robin Herbots

We're developing an application at work where the backend system is very limited on what characters it will accept over the wire as well as issues with various fields having to be in a specific format.  While we are validating everything on the backend system before we accept it, I believe that it is also useful to provide guidance to the user while they are entering data into the fields via input masks.

The tool of choice for any website that is using jQuery would be Robin Herbots' jquery.inputmask plugin.  It is extremely powerful, still actively developed, and handles cases you may not have thought of yet.

After playing with this for a few days, I'm going to try to distill down to a very simple way of using the plugin in an application, without having to wire up each individual input element on the page.

Installation

You will need to reference three JavaScript files in your HTML page.  These <script> tags should be towards the bottom of the page, as is standard practice.  These should probably be referenced in the following order.

1) jQuery library (such as "jquery.min.js")

You can host it either locally on your web server or use the Google CDN (ajax.googleapis.com).

2) jQuery InputMask 3.x plugin (jquery.inputmask.bundle.js)

If the size of the bundle is too large for your tastes, then you can look at the InputMask documentation for other versions to use.

3) jQuery InputMask 3.x binding plugin (inputmask.binding.js from the extra/binding/ folder)

Binding

Place the following JavaScript at the bottom of the page inside either a separate .js file or embedded on the page in a <script> tag.

$(document).ready(function() {

  $(":input[data-inputmask-mask]").inputmask();

  $(":input[data-inputmask-alias]").inputmask();

  $(":input[data-inputmask-regex]").inputmask("Regex");

});

This wires up the specific attributes on the <input> tag.

Usage

By doing it this way, using the input masks, aliases and regex is very easy to do on individual <input> elements.

1) A US-centric date field that takes "mm/dd/yyyy"

This uses a standard alias called "mm/dd/yyyy", which handles things like only allowing 1-12 for the month number, 1-31 for the day number, and treats 2-digit year entry as "20xx".

<input class="form-control col-md-3" data-inputmask-alias="mm/dd/yyyy" data-val="true" data-val-required="Required" id="DATE" name="DATE" placeholder="mm/dd/yyyy" type="text" value="" />

2) US-centric name field that only allows A-Z, 0-9 and some other characters via a regular expression.  With a maximum length of 25 characters.

<input class="form-control col-md-4" data-inputmask-regex="[A-Za-z0-9 .,'-]+" maxlength="25" data-val="true" data-val-required="Required" id="NAME" name="NAME" placeholder="NAME" type="text" value="" />

Note: As mentioned previously, the backend system that we are storing data in is extremely limited in terms of what characters it can accept.  Accented characters such as Spanish or Icelandic names would play havoc, so we have to prevent their entry on the web page.  It sucks, but we're not in control of the backend system on this project.

3) US-centric phone field as "(999)999-9999"

<input class="form-control col-md-4" data-inputmask-mask="(999)999-9999" data-val="true" data-val-required="Required" id="PHONE" name="PHONE" placeholder="PHONE" type="text" value="" />

Note: There are far better aliases for handling phone numbers.  This particular backend system only allows 10 digit phone numbers, without a country code.  Take a look at the 'phone' alias for normal usage.

4) Input field that only accepts A-Z, a-z and 0-9, minimum of 10 characters, maximum of 20.

<input class="form-control col-md-4" data-inputmask-mask="*{10,20}" data-val="true" data-val-required="Required" id="HICN" name="HICN" placeholder="HICN" type="text" value="" />

JSFiddle

The JSFiddle for this code can be found at:

http://jsfiddle.net/ThomasH/tx078u0a/