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.
A failing validation will prevent forms from being submitted until they are corrected or the rule is changed/removed.
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.
Bound values will appear as a missing data warning in "Edit Mode," but will function as expected in the published view.
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.
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.
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.
To enable "JS Mode" in this feature, simply click the "JS" button in the upper righthand section of the configuration modal.
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.
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.
Updated 3 months ago