Validate inputs and forms
Learn how to validate forms and input components.
Many input components support validation rules. These rules enforce certain requirements on user inputs, such as minimum or maximum length. Configure validation settings in the Interaction section of the Inspector.
The validation rules available depend on the type of component you're using. The following lists include common rules:
- Number Inputs
- Text Inputs
- File Inputs
- Date and Time Inputs
- Special Inputs
Validation rules common across number input components:
| Rule | Description |
|---|---|
| Allow null | Whether to allow a null value. If true, the input's cleared state is null instead of 0. |
| Minimum | The minimum value to accept. |
| Maximum | The maximum value to accept. |
| Required | Indicates that a value must be provided for this input. |
Validation rules common across text input components:
| Rule | Description |
|---|---|
| Pattern | A limitation on the type of string to accept. Options are Email, Regex, or URL. |
| Min length | The minimum number of characters to accept. |
| Max length | The maximum number of characters to accept. |
| Required | Indicates that a value must be provided for this input. |
Validation rules common across file input components:
| Rule | Description |
|---|---|
| Min size | The minimum size of uploaded files with optional file size units. Without units, measured in bytes. |
| Max size | The maximum size of uploaded files with optional file size units. Without units, measured in bytes. |
| Required | Indicates that a value must be provided for this component. |
Validation rules common across date and time input components:
| Rule | Description |
|---|---|
| Min date or time | The minimum allowed date or time. |
| Max date or time | The maximum allowed date or time. |
| Required | Indicates that a value must be provided for this input. |
Validation rules common across special input components:
| Rule | Description |
|---|---|
| Required | Indicates that a value must be provided for this input. |
These lists are not comprehensive. Check the Validation rules of your component for the full list.
Apply custom validation rules
You can also create a Custom rule. Custom rules support any JavaScript expression that evaluates to a truthy value.
Optionally, set this field to evaluate to a string, which the component displays as an error message.
For example, you could create a custom rule with the following value: {{ new Date().getDay() === 1 ? 'This input is invalid on Mondays' : '' }}. This rule triggers an error message to display on Mondays. No error message is displayed on all other days.
Validate form submissions
Forms can check the validation status of inputs—enable Validate inputs on submit in the Interaction section of the Inspector. Each input component supports several validation options. Validation for a selected input is configured in the Validation section of the Inspector.
If any single input fails validation, the form fails validation.
For JSON Schema Form components, you define validation rules in the JSON schema. You can also enable automatic validation by enabling Live validation in the Inspector.
You can also modify input properties of JSON Schema Form components by updating the type field. This can be useful if fields need to accept null values or you need to modify your form to more closely match your data.