Browse Source

Merge pull request #8574 from nocodb/nc-docs/validations

Nc docs/validations
nc-fix/nc-dropdown-default-placement
Pranav C 6 months ago committed by GitHub
parent
commit
985ca20cd0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 137
      packages/noco-docs/docs/090.views/040.view-types/030.form.md
  2. BIN
      packages/noco-docs/static/img/v2/views/form-view/attachment-field-validations.png
  3. BIN
      packages/noco-docs/static/img/v2/views/form-view/date-field-validations.png
  4. BIN
      packages/noco-docs/static/img/v2/views/form-view/numeric-field-validations.png
  5. BIN
      packages/noco-docs/static/img/v2/views/form-view/text-field-validations.png

137
packages/noco-docs/docs/090.views/040.view-types/030.form.md

@ -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:

BIN
packages/noco-docs/static/img/v2/views/form-view/attachment-field-validations.png vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 267 KiB

BIN
packages/noco-docs/static/img/v2/views/form-view/date-field-validations.png vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB

BIN
packages/noco-docs/static/img/v2/views/form-view/numeric-field-validations.png vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 145 KiB

BIN
packages/noco-docs/static/img/v2/views/form-view/text-field-validations.png vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 180 KiB

Loading…
Cancel
Save