Custom Input and Form Validation

Each input field for Form and Pop-up Form, as well as the individual input types (Checkbox, Date Time Picker, Dropdown, File Picker, Input, JSON Input, Radio Button, Tag Selector, and Text Area) are equipped with the ability to validate their input based on a customizable set of rules which can be defined in the configuration panel for that input field in any Space.

📘

Note:

A failing validation will prevent forms from being submitted until they are corrected or the rule is changed/removed.

Defaults

By default, input validation in Forms and Pop-up Forms is performed based on the field type described by the DB/API schema. Adding a validation rule will only change the validation in the form at the time of input and not on submission to the DB/API, where existing input validations (should they exist) will assert the veracity of the field's input.

Custom Error Messages

Each input field can be configured to have its own custom error message. It can be configured by clicking on the input field of the Form, or by clicking on the standalone input field, and clicking the "+" next to "Validation Rules" in the righthand configuration panel. Then change the default text ("Please enter a valid value.") to whatever custom message you prefer.

With Data Binding

One can add a bit of bound data to the error message to make it clearer to the end user what is happening, or simply to make the error more personal and stand out.

📘

Note:

Bound values will appear as a missing data warning in "Edit Mode," but will function as expected in the published view.

Comparators

Creating text comparisons for your input fields is as simple as selecting an operator from the dropdown in the configuration modal for the input field (default is "equal to"):

Comparison Via Value Operators

Comparison Via Data Binding

It is possible to compare your input field data to data from another part of your Space (component output), or environmental bindings such as User Role, User Email Address. You would assign this comparison by selecting the data to compare via the dropdown which appears below this field once you've selected an item from the "Value From Component" field.

Built-in Comparators (Other)

In addition to the custom validation types, we've also baked in some classic comparators for your use. They can be found at the bottom of the configuration modal for the input field.

Is an email address: Will compare text input from your input field to determine if a string matches email address formatting.

Is a phone number: Will compare text input from your input field to determine if a string matches telephone number formatting.

Comparison Strings

Once you've determined the manner in which your input field value will be compared, you'll need to provide something against which it can be evaluated.

Via Text

Below, we can see that the string "author:" must appear in the input "Title" (as indicated by the greyed out field labeled "title's value"). Note that the value in this field will change with the label of the input to which it is being added.

Here we see the validation in action: The user forgets to add the author's name and then fixes the issue.

Via JSEval

One can use a bit of JavaScript to create a comparison string or just pull in data from elsewhere in the app. Below are a couple of examples, but the possibilities are only limited by your JS skill (up to and including writing functions for your validation). This feature uses the same behind-the-scenes code as the rest of our JSEval functionality.

To enable "JS Mode" in this feature, simply click the "JS" button in the upper righthand section of the configuration modal.

📘

Note:

Clicking this button will remove any configuration already entered in the modal. This is also true of anything in the JSEVal input field when going in the opposite direction.

Here we see the value of field2 being compared to Euler's Constant.

Here we see the value of field2 being compared to Euler's Constant.

Clicking "Insert a variable" below the comparison input field when in "JS Mode" allows for binding data from the Space and environment into your rule.

Here we see field2 being compared to field3 from the same form.

Here we see field2 being compared to field3 from the same form.