Set up Input Mask (Regex) on Kizeo Forms to prevent transcription errors

06Sep, 2016

0Comments

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: /^([a–zA–Z]{1,2}\d{1,2}[a–zA–Z]{0,2})\s*?(\d[a–zA–Z]{2})$/gmi
• Match numeric input that may or may not include commas and/or decimal point : /^[1–9][\,\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’.

• 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 ‘?’):

Data entry is validated only if it does comply with the predefined format (i.e. your Regex)
If it does not comply with it, a message is displayed below :

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

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