This week we are going to look at a Masked Input plugin which provides another easy to implement but big impact to the users interface improvement capability.

The Demonstration

Click here to see a demonstration of the Input Mask plugin running within an XPage

The Sample Database

Rather than create a new URL every week I am going to stick with the same one from now on. It will contain a conglomeration of all the previous weeks examples and is basically a copy of the demo database on the website. The jQuery in XPages Sample Database

Masked Input

The Masked Input plugin by Josh Bush turns a plain editable field into a field which:

• Increases user buy in by adding a visually appealing enhancement to the XPage
• Allows the developer to pre-define the input order and type of keyboard characters
• Shows the user what the application expects them to input
• Enforces validation rules by preventing users from typing in potentially incorrect values

The Input Mask adds the (__) ___-____ x_____ into the field and as the user starts to type the “Mask” is replaced by the keyed value.

If the user attempt to try and enter anything other than a number nothing happens. This effect is very easily implemented using only a few lines of JavaScript to instantiate the code. Remember in XPages we have to use the x$ functionand the {id:} name of the field to select the real id in the HTML Document Model (DOM)

jQuery(function($){
   x$("#{id:date}").mask("99/99/9999");
   x$("#{id:phone}").mask("(999) 999-9999");
   x$("#{id:ssn}").mask("999-99-9999");
});

The Input mask plugin API comes with an abundance of other features you can change like:

• Changing the mask character from _ to something else
• Triggering a function once the mask is complete (all characters filled in)
• Supplying your own mask definition (i.e if you want a specific character other than a-zA-Z0-9)
• Allowing for wildchard characters (you don’t care what the user types)
• Allowing for optional characters – (option phone extension or 4 final characters on a 9 digit zip code)

Adding this plug in to your database will take less than 5 minutes and you can improve the user interface immediately. Check out The Masked Input website for more information and futher information on the API parameters/capabilities.

Note:When you are submitting the form you will still need to validate it as the Input Mask does not handle validation outside of the field itself. The whole field value is submitted (Input Mask value as well) so if you create a (123) 123-1234 mask you will need to make sure you can accept that on the back end in a text field and you don’t need a 9 digit number.

For more information on how to add this capability to your XPages check out the “how does it work” article