Validation

Validation properties are available for some components to allow you to define validation rules in your app.

Validation properties

Properties Components
Required field Drawing area, Filter select, File uploader, Select, Text area and Text input
Choose common pattern Text input
Additional validations Text area and Text input

Note: Button and Icon button component have a Field validation action to trigger validations in input fields.

Required field

You can make a component required in all instances or use Liquid templating to add a rule to specify when the component should be required. If the user fails to fill in the component, a default message is displayed. You can also, enter your own message.

Choose common pattern

A set of common validation patterns are defined in the Choose common pattern drop-down menu where you can set the expected input data type for the field, such as digits, letters, email or URLs. A standard default message is displayed when the user enters data in the field that does not match the predefined pattern.

Available common patterns

The following table lists the available common pattern options and provides examples of valid and invalid input:

Pattern Description
None Does not match any string and is used when no pattern is required.
Number (negative and decimals) Matches any valid number, including negative numbers and decimals.
Digit Matches any positive integer, that is, numbers without decimals or negatives.
Word (only alphanumeric) Matches any word that contains only alphanumeric characters, that is, letters and numbers.
Word (special characters allowed) Matches any word that contains alphanumeric characters as well as certain special characters such as periods, commas, and semicolons.
Text Matches any string that contains alphanumeric characters, spaces and certain special characters such as periods, commas, and semicolons.
Letter Matches any single letter (uppercase or lowercase) as well as certain letters in Spanish, such as ñ, á, é, í, ó, and ú.
Note: if you need to have a pattern rule for other characters, for example Nordic characters, then you can do this by creating an additional validation pattern using Liquid templating in the Error rule property.
Email Matches any valid email address.
URL Matches any valid URL, including protocols such as http, https, ftp, mailto, etc.
Date: mm/dd/yyyy Matches any date in the format MM/DD/YYYY (month/day/year) where MM is the month in two digits (01-12), DD is the day in two digits (01-31), and YYYY is the year in four digits (for example 2022).
Date: dd/mm/yyyy Matches dates in the format DD/MM/YYYY, where DD is the day (01-31), MM is the month (01-12), and YYYY is the year (for example 2022). .
Time 12H: HH:MM AM/PM Matches times in 12-hour format, with an optional space and either "AM" or "PM" at the end. The pattern matches if the hour value is either "00", "12", or a value between 1-11 (with or without a leading zero), and the minute value is between 00-59. The optional space and AM/PM values are matched using regular expression alternation.
Time 24H: HH:MM:SS Matches times in 24-hour format, with hours in the range 00-23 and minutes and seconds in the range 00-59. The pattern uses grouping and repetition to ensure that the minute and second values each consist of two digits.
Strong password Matches "strong" passwords that meet the following criteria:
- is at least 8 characters long
- contains at least one uppercase letter
- contains at least one lowercase letter
- contains at least one digit
- contains at least one special character from the given set.
The pattern uses positive lookahead assertions to check for the presence of each required character type, and a character class to match any of the allowed special characters.
IPv4 Matches valid IPv4 addresses that consist of four decimal numbers separated by periods. Each decimal number must be in the range 0-255, with the exception that leading zeroes are not allowed (for example, 01). The pattern uses alternation to match any of the four possible formats for a decimal number, that is, a single digit, two digits starting with 1, two digits starting with 2-9, or three digits starting with 1.
IPv6 Matches valid IPv6 addresses that consist of up to eight groups of four hexadecimal digits separated by colons. The pattern uses grouping and repetition to match each group, with an optional space between groups. The pattern allows for leading zeroes and both uppercase and lowercase hexadecimal digits.

Common pattern regular expressions

The following table shows the defined regular expressions for the available common patterns:

Pattern Validation regular expression
None None
Number (negative and decimals allowed) '^-?\d+((\.
Digits '^\d+$'
Word (only alphanumerical) '^[A-Za-z0-9ñÑçÇáéíóúÁÉÍÓÚüÜ]+$'
Word (special chars allowed) "^[A-Za-z0-9ñÑçÇáéíóúÁÉÍÓÚüÜ\.,;:!?()_\x22'%\-]+$"
Text "^[A-Za-z0-9ñÑçÇáéíóúÁÉÍÓÚüÜ\.,;:!?()\x22'%\-\s]+$"
Letter '^[A-Za-zñÑçÇáéíóúÁÉÍÓÚüÜ]$'
Email '^[^\s@]+@([^\s@.,]+\.)+[^\s@.,]{2,}$'
URL '^((?:http|https|ftp|mailto|file|data|irc):\/\/)?[A-Za-z0-9\-]{0,63}(\.[A-Za-z0-9\-]{0,63})+(:\d{1,4})?\/(\/[A-Za-z0-9\-._]+\/)(\?.)?(#.)?$'
Date '^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$'
Date: dd/mm/yyyy '^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$'
Time 12H: HH:MM AM/PM '^((00|12):00|(1[01]|0?[1-9]):([0-5]\d))\s?((A|P)\.?M\.?)$'
Time 24H: HH:MM:SS '^(2[0-3]|[01]\d|\d)(:[0-5]\d){2}$'
Strong Password "^(?=.[A-Z])(?=.[a-z])(?=.\d)(?=.[!?@#$%^&()\-+\\\/.,:;\x22'{ }\[\]<>~])[A-Za-z0-9ñÑçÇáéíóúÁÉÍÓÚüÜ!?@#$%^&()-+\\\/.,:;\x22'{ }\[\]<>~]{8,}$"
IPv4 '^(?:25[0-5]|2[0-4]\d|[01]\d{2}|\d{1,2})(?:.(?:25[0-5]|2[0-4]\d|[01]\d{2}|\d{1,2})){3}$'
IPv6 '^(?:[A-Fa-f0-9]){0,4}(?: ?:? ?(?:[A-Fa-f0-9]){0,4}){0,7}$'

Additional Validations

Some components allow you to add additional validations:

You must add rules and a message for the user. To add the rule use Liquid templating.

Note: if overlapping validation conditions occur, then the hierarchy is: Required > Common pattern > Error > Warning > Informative.