Skip to content

Commit

Permalink
Merge pull request #8574 from nocodb/nc-docs/validations
Browse files Browse the repository at this point in the history
Nc docs/validations
  • Loading branch information
pranavxc committed May 25, 2024
2 parents 7b694af + fd65ac0 commit 985ca20
Show file tree
Hide file tree
Showing 5 changed files with 128 additions and 9 deletions.
137 changes: 128 additions & 9 deletions packages/noco-docs/docs/090.views/040.view-types/030.form.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,26 +89,145 @@ To change the field label displayed on the form & add help-text, click on the re
2. **Help Text** `Optional`
3. **Required** : Toggle to mark the field as required

:::info
- Required fields are marked with a red asterisk (*) in the form.
- If Checkbox field is marked as required, it has to be checked to submit the form.
:::

![Field Label & Help Text](/img/v2/views/form-view/field-config.png)

:::info
Formatting options are supported for the `Help Text` field. You can also use Markdown to format the text.
:::

### Field Type Specific Settings
For select based field types (`Single-Select`, `Multi-Select`, `User`), you can configure the following additional settings:
### Select Field Type

#### Limit Options
Limit the number of options displayed in the dropdown or list of shared form. This is useful when you have a large number of options & want to limit the number of options displayed in the dropdown or list for the user to select from.
- Use `Hide` button next to the option to hide the option from the dropdown or list.
- Use `Reorder` button associated with a field to reorder the options.
#### Options Layout
For select based field types, you can configure the options layout to be displayed as a `Dropdown` or an inline expanded `List`.

![Options Layout](/img/v2/views/form-view/options-layout.png)

#### Limit Options
Limit the number of options displayed in the dropdown or list. This is useful when dealing with a large number of options, allowing you to restrict the visible choices for the user.
- Use `Hide` button next to the option to hide the option from the dropdown or list.
- Use `Reorder` button associated with a field to reorder the options.

![Limit options](/img/v2/views/form-view/limit-options.png)

#### Options Layout
For select based field types, you can configure the options layout to be displayed as a `Dropdown` or an inline expanded `List`.
## Field Validations ☁

![Options Layout](/img/v2/views/form-view/options-layout.png)
:::info
Field validations are only available in the cloud version of NocoDB.
:::

NocoDB allows you to configure input data validations for fields in the form. To configure field validation, click on the required field in the **Form Area**, and in the right configuration panel, configure the desired validations. Supported validations are type-specific and are listed below.

:::info
- Validation rules for fields are only applied when input fields are not empty. Set *Required field* to enforce these validation rules and ensure that the field cannot be left blank.
- The form cannot be submitted if the validation rules are not met.
:::

### Text-based Field Types

For text-based field types `Single Line Text` `Email` `Phone number` `URL` `Long Text` `Rich Text`, you can configure the following validations:
- **Minimum characters**: Specifies the minimum number of characters required for the field.
- **Maximum characters**: Specifies the maximum number of characters allowed for the field.
- **Starts with**: Allows you to define a prefix that the field value must start with.
- **Ends with**: Allows you to define a suffix that the field value must end with.
- **Contains string**: Allows you to define a substring that the field value must contain.
- **Does not contain string**: Allows you to define a substring that the field value must not contain.
- **Regular Expression**: Allows you to define a regular expression pattern that the field value must match.

For Email field type, you can configure the following additional validations:
- **Validate email**: Ensures that the field value is a valid email address.
- **Accept only work email**: Ensures that the field value is a valid work email address.

For Phone number field type, you can configure the following additional validations:
- **Validate phone number**: Ensures that the field value is a valid phone number.

For URL field type, you can configure the following additional validations:
- **Validate URL**: Ensures that the field value is a valid URL.

-----

**Configuration Steps**
1. Click on the required field in the **Form Area**.
2. In the right configuration panel, click on the Settings icon next to `Custom Validations`
3. Click on `Add Validation` to add a new validation rule.
4. `VALIDATOR` Select the type of validation rule to be applied from the dropdown.
5. `VALIDATION VALUE` Enter the value for the validation rule.
6. `WARNING MESSAGE` (Optional) Enter a warning message to be displayed when the validation rule is not met.

![Text Field Validations](/img/v2/views/form-view/text-field-validations.png)

### Numeric Field Types
For numeric field types `Number` `Currency` `Percentage` `Decimal` `Duration`, you can configure the following validations:
- **Minimum**: Specifies the minimum numeric value allowed for the field.
- **Maximum**: Specifies the maximum numeric value allowed for the field.

:::info
- Value configured can be an integer or a decimal number, positive or negative.
- Maximum value should be greater than or equal to the minimum value.
- Value can be left empty to disable the validation.
:::

-----

**Configuration Steps**
1. Click on the required field in the **Form Area**.
2. In the right configuration panel, click on the toggle button next to `Limit number to a range`
3. [Optional] Configure the minimum value allowed for the field.
4. [Optional] Configure the maximum value allowed for the field.

![Numeric Field Validations](/img/v2/views/form-view/numeric-field-validations.png)

### Date-based Field Types
For date-based field types `Date` `Date & Time` `Time` `Year`, you can configure the following validations:
- **Minimum**: Specifies the minimum allowed value for the field.
- **Maximum**: Specifies the maximum allowed value for the field.

:::info
- For both, date & date-time fields, only the date part is considered for validation.
- Value can be left empty to disable the validation.
:::

-----

**Configuration Steps**
1. Click on the required field in the **Form Area**.
2. In the right configuration panel, click on the toggle button next to `Limit date to a range`
3. [Optional] Configure the minimum value allowed for the field.
4. [Optional] Configure the maximum value allowed for the field.

![Date Field Validations](/img/v2/views/form-view/date-field-validations.png)

### Attachment Field Type
For the attachment field type, you can configure the following validations:
- **Limit file types**: Allows you to restrict the file types that can be uploaded by specifying permitted MIME types.
Example
- `image/png` Allows only PNGs
- `application/pdf` Allows PDF documents only
- `image/*` Allows all images
- **Limit file size**: Specifies the maximum file size allowed for the attachment. Size can be either in KB or MB.
- **Limit number of files**: Specifies the maximum number of files that can be uploaded.

:::info
- MIME types should be separated by a comma. Find MIME types for different file formats [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types).
- File size limit specified is the maximum size allowed for each file, not the total size of all files.
:::

-----

**Configuration Steps**
1. Click on the required field in the **Form Area**.
2. `Limit file types` Enter the permitted MIME types separated by a comma.
3. `Limit number of files` Enter the maximum number of files that can be uploaded.
1. Click on the required field in the **Form Area**.
2. In the `Limit file types` section, enter the permitted MIME types separated by a comma.
3. In the `Limit number of files` section, specify the maximum number of files that can be uploaded.
4. In the `Limit file size` section, specify the maximum allowable file size for the attachment.

![Attachment Field Validations](/img/v2/views/form-view/attachment-field-validations.png)

## Prefill Form Fields
Here's a more professional rephrasing of the given content:
Expand Down
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 985ca20

Please sign in to comment.