Simple (built-in) validations

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 – determines whether the field must be filled in by the user. It is set using the property Required condition (requiredCondition) field Data quality of the given component. If we want the field to always be required, we provide the boolean value as the condition true. We can also enter a more complex condition dependent on other fields – e.g. a text field becomes required only when the user selects a specific checkbox. Conditions are defined in the conditions editor and they can refer to the values of other components or session variables. Example: For the Email field requiredCondition to getValue("GesCheckbox1") == "true", we can set listens for changes in the value of this checkbox – this is done with the “Listening” property in the interactions panel. Thanks to listening, when the user checks or unchecks the checkbox, the form will immediately recheck the required condition for the Email field. If the required condition is not met (i.e. the field is required but empty), the user will not be able to proceed to the next step, and an error message will appear under the field informing that the field is required.

Figure 1. Example of a required condition for a field dependent on the value of another component (here, a checkbox)

• Minimum/Maximum number of characters – defines the allowed length of text in the field. For the Text Area (TextArea) the properties minLength (minimum number of characters) and maxLines (maximum number of lines of text). For Text Field (TextField) we can set Minimum number of characters (minLength) and Maximum number of characters (maxLength), which defines the maximum length of the entered text. For example, to require at least 50 characters of description in a comment field, we set minLength = 50 – if the user enters fewer, they will see a message saying that a longer statement is required.
• Mask (regular expression) – allows you to define a pattern, which the entered value must match. It is used, for example, to validate formats such as postal code, phone number, Tax ID, etc. Configuration consists of entering a regular expression in the Mask (section Data quality component's field), and then entering the error message text in the field Mask matching error message. 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. Example: 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. with letters or an incorrect arrangement of digits) will cause an error to be displayed.

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})	Tax ID	782-226-19-60 or 782-22-61-960 or 7822261960
[a-zA-ZąćęłńóśźżĄĆĘŁŃÓŚŹŻ]+[a-zA-ZąćęłńóśźżĄĆĘŁŃÓŚŹŻ\ \-\']*	The field starts with a letter, followed only by letters, spaces, hyphens, apostrophes. Example use in 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 sign, followed only by digits, parentheses, spaces, plus signs, hyphens. Example use in a phone number field (an alternative solution to the example mask from visibleMask Mask presentation).	[phone] or (48) 123-123-123
[0-9A-Za-z]*	Ability to enter only digits and letters	abc123 123abc
[0-9]{6}[\*]{1,6}[0-9]{4}	Masked card number - the field should be completed by providing the first 6 digits and the last 4 digits of the card number, separated by " * " characters (maximum six special characters: " * ").	123456**7890

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

  • 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),
  • ? - mask elements placed after "?" are optional.

Mask definition	Meaning	Mask presentation	Example values
99-999	Postal code	__-___	61-897
99999999999	PESEL	___________	75010125915
999-999-99-99	Tax ID	___-___-__-__	782-22-61-960
[phone]? w999	Phone number with optional extension number	+__ __ __ __ ___ w___	[phone] or [phone] w001

Validation after each character

In the section Data quality there is the option Validation after every character (validationOnEverySign) - allows validation to be triggered (only field requiredness and mask) on the component after every entered character. The component's default value is "false".

Demo conclusions: demoRegex, demoMaskPresentation, demoValidators