Validation section
The Validation collapsible section in some components' Props tab provides rule-based field validation. Each rule group is listed as a clickable item. Click a rule group to open a popup configuration panel, where you can set its properties.
The following rule groups are available:
Mandatory validation
Marks the field as required and configures the mandatory indicator and error message.
If a property displays the Variable Binding icon 
, that means it supports variable binding.
| Property | UI Control | Default | Description |
|---|---|---|---|
| Mandatory | Toggle switch | Off | When enabled, the field is required and submission without a value triggers a validation error. |
| Error message | i18n setter | - | Sets the error message displayed when mandatory validation fails. Supports internationalisation. |
| Asterisk | Toggle switch | Off | When enabled, displays an asterisk indicator next to the field label. |
Max / Min value validation
Validates that the input value falls within the specified maximum and minimum limits, allowing you to set both upper and lower boundaries for the input field.
If a property displays the Variable Binding icon , that means it supports variable binding.
| Property | UI Control | Default | Description |
|---|---|---|---|
| Min | Number input | - | Sets the minimum acceptable value. |
| Max | Number input | - | Sets the maximum acceptable value. |
| Error message | i18n setter | - | Sets the error message displayed when the value is outside the specified range. Supports internationalisation. |
Max / Min length validation
Validates that the length of the input falls within the specified maximum and minimum character count limits. This is commonly used to restrict text input to a certain length, helping maintain data consistency and preventing overly long or short entries.
If a property displays the Variable Binding icon , that means it supports variable binding.
| Property | UI Control | Default | Description |
|---|---|---|---|
| Min length | Number input | - | Sets the minimum acceptable character count or array length. |
| Max length | Number input | - | Sets the maximum acceptable character count or array length. |
| Error message | i18n setter | - | Sets the error message displayed when the length is outside the specified range. Supports internationalisation. |
Length validation
Validates that the input has an exact number of characters or elements as specified.
If a property displays the Variable Binding icon , that means it supports variable binding.
| Property | UI Control | Default | Description |
|---|---|---|---|
| Length | Number input | - | Sets the exact character count or array length required. |
| Error message | i18n setter | - | Sets the error message displayed when the length does not match. Supports internationalisation. |
Regex validation
Validates that the input matches a specified pattern, making sure data conforms to a defined format.
If a property displays the Variable Binding icon , that means it supports variable binding.
| Property | UI Control | Default | Description |
|---|---|---|---|
| Regex | Expression input | - | Sets the regular expression pattern to validate against. Accepts a JavaScript expression. |
| Error message | i18n setter | - | Sets the error message displayed when the input does not match the pattern. Supports internationalisation. |
Format validation
Validates that the input matches a common format such as numbers, email addresses, URLs, and telephone numbers.
If a property displays the Variable Binding icon , that means it supports variable binding.
| Property | UI Control | Default | Description |
|---|---|---|---|
| Format | Button group (Number | Email | Url | Tel | Sg tel | Sg nric | Default) | - | Selects the format to validate against. Selecting Sg tel, Sg nric, or Email automatically applies a corresponding regex pattern. |
| Error message | i18n setter | - | Sets the error message displayed when the input does not match the selected format. Supports internationalisation. |
Custom validation
Applies custom validation logic through a bound function.
Click the Bind Function button to open the Event Binding window, where you can select or create a validator function. The function accepts the following signature:
validator(rule, value, callback) {
if (!value) {
callback("Required Value!");
} else {
callback();
}
}
Call callback() with no arguments to pass validation, or with an error string to fail.
Last updated on 20 May 2026