diff --git a/packages/noco-docs/docs/090.views/040.view-types/030.form.md b/packages/noco-docs/docs/090.views/040.view-types/030.form.md index cb0db7cb4f..0767e6fb14 100644 --- a/packages/noco-docs/docs/090.views/040.view-types/030.form.md +++ b/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: diff --git a/packages/noco-docs/static/img/v2/views/form-view/attachment-field-validations.png b/packages/noco-docs/static/img/v2/views/form-view/attachment-field-validations.png new file mode 100644 index 0000000000..16aaa79ff7 Binary files /dev/null and b/packages/noco-docs/static/img/v2/views/form-view/attachment-field-validations.png differ diff --git a/packages/noco-docs/static/img/v2/views/form-view/date-field-validations.png b/packages/noco-docs/static/img/v2/views/form-view/date-field-validations.png new file mode 100644 index 0000000000..6ce75876cb Binary files /dev/null and b/packages/noco-docs/static/img/v2/views/form-view/date-field-validations.png differ diff --git a/packages/noco-docs/static/img/v2/views/form-view/numeric-field-validations.png b/packages/noco-docs/static/img/v2/views/form-view/numeric-field-validations.png new file mode 100644 index 0000000000..79d42aeb55 Binary files /dev/null and b/packages/noco-docs/static/img/v2/views/form-view/numeric-field-validations.png differ diff --git a/packages/noco-docs/static/img/v2/views/form-view/text-field-validations.png b/packages/noco-docs/static/img/v2/views/form-view/text-field-validations.png new file mode 100644 index 0000000000..cb9fd31872 Binary files /dev/null and b/packages/noco-docs/static/img/v2/views/form-view/text-field-validations.png differ