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: