Simple validations (built-in)

Simple validations are a set of basic checks available directly in Eximee Designer. Their configuration is done by setting the appropriate component properties in the panel Data quality. Below are the most important built-in validation methods:

  • Field requiredness – specifies whether the field must be obligatorily filled in by the user. It is set using the property Required condition (requiredCondition) field in the Data quality of the component. If we want the field to always be required, we provide the boolean value true. We can also introduce a more complex condition dependent on other fields – e.g. a text field becomes required only when the user checks a specific checkbox. Conditions are defined in the condition editor and they can refer to the values of other components or session variables. field is sufficient. For the Email field you can set requiredCondition to getValue("GesCheckbox1") == "true", which means that the email address will be required only if the consent checkbox was checked earlier. In such a situation you should additionally make sure that the Email field listens to changes in the value of that checkbox – this is done using the "Listening" property in the interactions panel. Thanks to listening, when the user checks or unchecks the checkbox, the form will immediately re-evaluate the required condition for the Email field. If the required condition is not met (that is, the field is required but empty), the user will not be able to proceed to the next step, and an error message informing that the field is required will appear under the field.

Illustration 1. Example of a required condition for a field dependent on the value of another component (here a checkbox)
  • Minimum/Maximum number of characters – specifies the allowable length of text in the field. For the Text Area (TextArea) component, the following properties are available minLength (minimum number of characters) and maxLines (maximum number of text rows). For the Text Field (TextField) you can set Minimum number of characters (minLength) and Maximum number of characters (maxLength), which defines the maximum length of entered text. For example, to force entering at least 50 characters of description in a comment field, set minLength = 50 – if the user enters fewer, they will see a message requiring a longer entry.

  • Mask (regular expression) – allows you to define a patternthat the entered value must match. It is used, for example, to validate formats such as postal code, phone number, tax ID (NIP), etc. Configuration consists of entering a regular expression into the Mask (section Data quality field of the component), and then providing the error message content in the Mask mismatch error messagefield. If the user enters a value that does not match the given regex, the defined message will be displayed under the field, and the form will not allow proceeding until the value is corrected. field is sufficient. For the Postal code we can set the mask \d{2}-\d{3} and the message "Invalid postal code format." Entering a string that does not meet this pattern (e.g. containing letters or incorrect digit arrangement) will cause an error to be shown.

Regular expression
Meaning
Example values

\d{2}-\d{3}

Postal code

61-897

\d{11}

PESEL

75010125915

(\d{3}[- ]\d{3}[- ]\d{2}[- ]\d{2})|(\d{3}[- ]\d{2}[- ]\d{2}[- ]\d{3})|(\d{10})

NIP

782-226-19-60 or 782-22-61-960 or 7822261960

[a-zA-ZąćęłńóśźżĄĆĘŁŃÓŚŹŻ]+[a-zA-ZąćęłńóśźżĄĆĘŁŃÓŚŹŻ\ \-\']*

The field starts with a letter, then only letters, space, hyphen, apostrophe. Example use for a first name or last name field.

Janina Nowak-Kowalska

[0-9\(\+]+[0-9\ \(\)\+\-]*

The field starts with a digit, an opening parenthesis or a plus, then only digits, parentheses, spaces, plus, hyphens. Example use in a phone number field (an alternative solution to the sample mask with visibleMask Mask presentation).

+48 (12) 31 23 123 or (48) 123-123-123

[0-9A-Za-z]*

Allows entering only digits and letters

abc123

123abc

[0-9]{6}[\*]{1,6}[0-9]{4}

Masked card number - the field should be filled by providing the first 6 digits and the last 4 digits of the card number, separated by "*" characters (up to six special characters: "*").

123456**7890

  • Mask presentation (visibleMask) – not to be confused with the regex mask above. The mask presentation is used to define the format in which during typing the characters in the text field should be arranged. A typical example is automatically adding hyphens or spaces in a postal code, NIP or credit card number while typing. The Mask presentation property is also specified in the Data qualitysection. A special syntax is used here (e.g. digits, letters, special characters) to define the display format. field is sufficient. For a NIP number we want the format 999-999-99-99 – the appropriate mask presentation expression will cause the user to type a continuous sequence of digits, and they will appear on the screen grouped as 3-3-2-2 with automatically inserted hyphens. The mask presentation concerns only the appearance of entered data for user convenience – it does not verify the correctness of the value itself (that is the job of the regex mask). Among the elements of mask definition there are the following characters:

    • S - represents any character that is a letter (A-Z,a-z),

    • 9 - represents any character that is a number (0-9),

    • A - represents any alphanumeric character (A-Z,a-z,0-9),

    • ? - elements of the mask placed after "?" are optional.

Mask definition
Meaning
Mask presentation
Example values

99-999

Postal code

__-___

61-897

99999999999

PESEL

___________

75010125915

999-999-99-99

NIP

___-___-__-__

782-22-61-960

+99 99 99 99 999? w999

Phone number with optional extension

+__ __ __ __ ___ w___

+48 61 41 51 000 or +48 61 41 51 000 w001

Validation after every character

In the Data quality there is an option Validation on every character (validationOnEverySign) - allows triggering validation (only field requiredness and mask) on the component after every entered character. The default value of the component is "false".

circle-info

Demo artifacts: demoRegex, demoMaskPresentation, demoValidators

Last updated

Was this helpful?