22Sep, 2016
0Comments

Set up Input Mask (Regex) to prevent transcription errors

An Input Mask refers to a string expression, defined by a developer, that governs what a user is allowed to enter in as input in a text box. It can be said to be a template, or set format that entered data must conform to, mainly used for the purposes of data integrity by preventing transcription errors.
Enhance data integrity by preventing transcription errors!

Step 1 : Define your input mask.

Regular Expressions (Regex): Basically, a regular expression is a pattern describing a certain amount of text. Their name comes from the mathematical theory on which they are based. More information can be found here

Basic regular expressions (Regex) : 

You can easily create simple Regex using ‘A’ for letters (alpha) and ‘N’ for numbers (Numerical):

Some examples :

  • A date : NN-NN-NNNN
  • A licence plate : AA-NNN-AA
  • National insurance number : N NN NN NN NNN NNN NN

Complex regular expressions :

To create more complex Regex, you can visit this website: Regex101.com (There is a ‘Regex library’)

Some examples :

  • UK Postcode Checker: /^([azAZ]{1,2}\d{1,2}[azAZ]{0,2})\s*?(\d[azAZ]{2})$/gmi
  • Match numeric input that may or may not include commas and/or decimal point : /^[19][\,\d]*(.\d+)?$/i
  • The word « process » must be displayed at the end : /process$/gi
  • Prime number Regex: /^1?$|^(11+?)\1+$/mg
  • Distorted email addresses (Matches distorted email addresses and converts them back to real ones): /^(?’Username'[-\w\d\.]+?)(?:\s+at\s+|\s*@\s*|\s*(?:[\[\]@]){3}\s*)(?’Domain'[-\w\d\.]*?)\s*(?:dot|\.|(?:[\[\]dot\.]){3,5})\s*(?’TLD’\w+)$/gm

Etape 2 : Input field settings.

  • Go to the settings of your input field, and then in ‘Advanced’.

insert and set up your input mask.

  • To create your input mask, simply type in your Regex in the dedicated area (Input ask – Regular expression), as shown in the above screenshot.
  • You can also add an help message for the user (see screenshot)

On a mobile.

On a mobile device, the ‘help message’ can be accessed via the tooltip (little ‘i’):

Click the tooltip to display the help message.

Data entry is validated only if it does comply with the predefined format (i.e. your Regex)
If it does not comply with it, an exclamation mark is displayed on the left hand side:

The input mask entered is not compliant and user cannot proceed.

User cannot save the form, and a message is displayed:

Message displayed to the user informing the form cannot be saved.

However, if it does comply with the Regex format, then a green icon is displayed:

A green icon is displayed if the input mask format was respected.

Do not hesitate to comment on this article!
All your questions, comments and suggestions are most welcome!

Post a comment

Your email address will not be published. Required fields are marked *