Form validation

There are three types of form validation: required, regular expression (regex) matcher, and predicate evaluation.

Required is a first-class property on all form elements. To mark a field as required, set required to true. Your app then automatically validates the field to ensure it is not blank when users submit your app's settings form. For example:

A regex matcher tests if the user input value matches a regex. If not, the error message is displayed when the user tries to submit the form. The string a user enters must be a value you can pass into new RegExp() in standard JavaScript. For example:

If you want to use logic to validate user input based on values of other fields in the form, use a predicate instead of a single regex matcher. For example:

You can also use booleans to permanently set a value to true or false. This is useful if you want to permanently disable something (until a later update, for example, disabled: true).

For more advanced logic, you can use a predicate to generate a logic tree. This is especially useful when you want to check values in multiple fields.

A predicate contains an operation (all, any, none) which translates directly to boolean logic (and, or, not) and a list of comparators (Comparator, ListComparator, or another Predicate). See the examples below:

Enable the submit button after the user completes both the user and password fields:

Display a form if a user selects one or more lists or if the user toggles the auto option on:

Display a message stating both username and password are required if the user tries to submit the form without completing both:

A Comparator lets you compare using a regex, equality, or to test if a value is empty. See the following examples:

Hide unless auth.email is a valid email:

Show when sync.enabled is toggled on:

Disable if auth.login is empty/blank:

The ListComparator has the same functionality as a Comparator, but it is used when comparing to the value of a multi-select option, which produces an array of values. Because you need to compare against multiple values, it includes an operation option so you can test using and (all), or (any), or not (none) logic. See the following examples:

Assume there is a multi-select option called lists on the sync section. Disable a control if all sync.lists are prefixed with default_:

Display a control if the user included the default list:

Disable a control unless the user included the default list: