Validate user input

Learn how to validate user input with built-in and custom validators

UI Bakery offers various methods to validate user input.

Default validators

UI Bakery features a range of built-in validators for different inputs, such as min/max, required, regex, etc.

Once the user inputs a value, validation occurs. By default, errors are shown after the input loses focus. This can be changed by unchecking the "Show error after touched" setting. In this case, errors will be shown immediately.

To create logic based on validation status, use the {{ui.input.valid}} variable. This variable holds a boolean value indicating the input's validity:

Form/detail validators

To configure default validators for form fields, select the field, open the Edit settings, and scroll to the validators list.

The form component will react to its input validation, disabling submission when invalid:

Adjust this behavior by toggling the Disable submit when invalid checkbox.

Custom validators

Besides built-in validators, it is also possible to create a custom validator that will run when the input is changed and will display an error near the input.

Custom validators are based on the following rules:

When the input's value changes, the validator is executed
{{params}} variable holds the current input value, enabling the creation of validation conditions
If the validator returns a String or an array of Strings, these will be displayed as errors
If the validator returns null or an empty value, validation is considered successful - no errors are shown, and the input is deemed valid
During validation, the input is considered invalid
Validation is complete once all assigned validators have finished

If the input value is empty, this validator will display an error:

return {{params}} ? null : 'Field is required';

Creating a validator

To create a custom validator:

Scroll to the validation section and click Create action in the Custom validator dropdown
Modify the validator condition - return string error or null value

The following variables are available to check input status programmatically:

{{ui.input.valid}} - indicates whether an input is valid
{{ui.input.validating}} - indicates if a validator is currently running

Async validators

Custom validators can execute asynchronous operations for validation, such as making an API request to check if an email address is available.

To create such validator:

Assign a new action to the Custom validator field
As a first step, specify an HTTP request to verify if a user exists with the provided email address.

As the second step, add a JavaScript condition to verify the presence of a user from the API response. If the users list is not empty, show an error message:

Custom validator for a form component

Form components can also be assigned custom validators. These validators receive the entire form object as {{param}} input and must return an object where each key is an input name and each value is an error message. This allows the form validator to assign errors to multiple fields in a single run.

return {{params.id}} ? null : { id: 'Field is required', name: 'Field is required' };

Setting errors manually with setErrors

In some cases, the form should be submitted, but based on the API's error response, it should either succeed or display errors. For these cases, use the {{ui.form.setErrors()}} method to set errors accordingly: