From b5962ad5916c223d78a6c3c3f07137cca77f036c Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 25 May 2024 06:42:31 +0530
Subject: [PATCH] Nc test/form view validations (#8548)

* fix(nc-gui): bulk update field header issue

* test: add custom validation test cases

* test: add custom validation test cases

* test: custom validation all type test cases

* test: add email, phone number validation test cases

* test: fix form fill textarea issue

* test: add form validation shared view test cases

* test: add survey form custom validation test cases

* test: add limit to range survery form test cases

* test: add attachment validation survey form test cases

* chore(nc-gui): lint
---
 .../nc-gui/components/cell/DatePicker.vue     |   5 +
 .../nc-gui/components/cell/DateTimePicker.vue |   6 +
 .../nc-gui/components/cell/TimePicker.vue     |   6 +
 .../nc-gui/components/cell/YearPicker.vue     |   6 +
 .../nc-gui/components/smartsheet/Form.vue     |   4 +-
 .../components/smartsheet/header/Cell.vue     |  27 +-
 .../smartsheet/header/VirtualCell.vue         |  23 +-
 .../smartsheet/toolbar/ColumnFilterMenu.vue   |   2 +-
 packages/nc-gui/context/index.ts              |   1 +
 .../playwright/pages/Dashboard/Form/index.ts  | 694 ++++++++++++-
 .../pages/Dashboard/SurveyForm/index.ts       |  58 +-
 .../Dashboard/common/Cell/AttachmentCell.ts   |  16 +
 .../pages/Dashboard/common/Cell/index.ts      |  17 +-
 tests/playwright/pages/SharedForm/index.ts    |  32 +
 .../tests/db/views/viewForm.spec.ts           | 926 +++++++++++++++++-
 15 files changed, 1776 insertions(+), 47 deletions(-)

diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index a21fab44e8..878ab83887 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -29,6 +29,8 @@ const isGrid = inject(IsGridInj, ref(false))
 
 const isForm = inject(IsFormInj, ref(false))
 
+const isSurveyForm = inject(IsSurveyFormInj, ref(false))
+
 const isExpandedForm = inject(IsExpandedFormOpenInj, ref(false))
 
 const isDateInvalid = ref(false)
@@ -193,6 +195,9 @@ const handleKeydown = (e: KeyboardEvent, _open?: boolean) => {
   switch (e.key) {
     case 'Enter':
       e.preventDefault()
+      if (isSurveyForm.value) {
+        e.stopPropagation()
+      }
       localState.value = tempDate.value
       open.value = !_open
 
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index 45fb5fb082..78cd8e3c1b 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -25,6 +25,8 @@ const isGrid = inject(IsGridInj, ref(false))
 
 const isForm = inject(IsFormInj, ref(false))
 
+const isSurveyForm = inject(IsSurveyFormInj, ref(false))
+
 const { t } = useI18n()
 
 const isEditColumn = inject(EditColumnInj, ref(false))
@@ -225,6 +227,10 @@ const handleKeydown = (e: KeyboardEvent, _open?: boolean, _isDatePicker: boolean
   switch (e.key) {
     case 'Enter':
       e.preventDefault()
+      if (isSurveyForm.value) {
+        e.stopPropagation()
+      }
+
       localState.value = tempDate.value
       if (!_isDatePicker) {
         e.stopPropagation()
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index 662303a163..96627b52c2 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -27,6 +27,8 @@ const isGrid = inject(IsGridInj, ref(false))
 
 const isForm = inject(IsFormInj, ref(false))
 
+const isSurveyForm = inject(IsSurveyFormInj, ref(false))
+
 const isExpandedForm = inject(IsExpandedFormOpenInj, ref(false))
 
 const column = inject(ColumnInj)!
@@ -171,6 +173,10 @@ const handleKeydown = (e: KeyboardEvent, _open?: boolean) => {
   switch (e.key) {
     case 'Enter':
       e.preventDefault()
+      if (isSurveyForm.value) {
+        e.stopPropagation()
+      }
+
       localState.value = tempDate.value
       open.value = !_open
       if (!open.value) {
diff --git a/packages/nc-gui/components/cell/YearPicker.vue b/packages/nc-gui/components/cell/YearPicker.vue
index 9c3dd5e7d3..e4ae1b5c21 100644
--- a/packages/nc-gui/components/cell/YearPicker.vue
+++ b/packages/nc-gui/components/cell/YearPicker.vue
@@ -27,6 +27,8 @@ const isGrid = inject(IsGridInj, ref(false))
 
 const isForm = inject(IsFormInj, ref(false))
 
+const isSurveyForm = inject(IsSurveyFormInj, ref(false))
+
 const isExpandedForm = inject(IsExpandedFormOpenInj, ref(false))
 
 const isYearInvalid = ref(false)
@@ -157,6 +159,10 @@ const handleKeydown = (e: KeyboardEvent, _open?: boolean) => {
   switch (e.key) {
     case 'Enter':
       e.preventDefault()
+      if (isSurveyForm.value) {
+        e.stopPropagation()
+      }
+
       localState.value = tempDate.value
       open.value = !_open
       if (!open.value) {
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index b35e9324ca..847dc1aea2 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1196,7 +1196,7 @@ useEventListener(
                 }"
               >
                 <!-- Form Field settings -->
-                <div v-if="activeField && activeColumn" :key="activeField?.id">
+                <div v-if="activeField && activeColumn" :key="activeField?.id" class="nc-form-field-right-panel">
                   <!-- Field header -->
                   <div class="px-3 pt-4 pb-2 flex items-center justify-between border-b border-gray-200 font-medium">
                     <div class="flex items-center">
@@ -1297,7 +1297,7 @@ useEventListener(
 
                 <!-- Form Settings -->
                 <template v-else>
-                  <Splitpanes v-if="formViewData" horizontal class="w-full nc-form-right-splitpane">
+                  <Splitpanes v-if="formViewData" horizontal class="nc-form-settings w-full nc-form-right-splitpane">
                     <Pane min-size="30" size="50" class="nc-form-right-splitpane-item p-4 flex flex-col space-y-4 !min-h-200px">
                       <div class="flex flex-wrap justify-between items-center gap-2">
                         <div class="flex gap-3">
diff --git a/packages/nc-gui/components/smartsheet/header/Cell.vue b/packages/nc-gui/components/smartsheet/header/Cell.vue
index 1451c69c25..15e4547207 100644
--- a/packages/nc-gui/components/smartsheet/header/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/header/Cell.vue
@@ -26,6 +26,8 @@ const isSurveyForm = inject(IsSurveyFormInj, ref(false))
 
 const isExpandedForm = inject(IsExpandedFormOpenInj, ref(false))
 
+const isExpandedBulkUpdateForm = inject(IsExpandedBulkUpdateFormOpenInj, ref(false))
+
 const isDropDownOpen = ref(false)
 
 const isKanban = inject(IsKanbanInj, ref(false))
@@ -58,7 +60,7 @@ const closeAddColumnDropdown = () => {
 }
 
 const openHeaderMenu = (e?: MouseEvent) => {
-  if (isLocked.value || (isExpandedForm.value && e?.type === 'dblclick')) return
+  if (isLocked.value || (isExpandedForm.value && e?.type === 'dblclick') || isExpandedBulkUpdateForm.value) return
 
   if (!isForm.value && isUIAllowed('fieldEdit') && !isMobileMode.value) {
     editColumnDropdown.value = true
@@ -83,7 +85,7 @@ const onClick = (e: Event) => {
     e.preventDefault()
     e.stopPropagation()
   } else {
-    if (isExpandedForm.value && !editColumnDropdown.value) {
+    if (isExpandedForm.value && !editColumnDropdown.value && !isExpandedBulkUpdateForm.value) {
       isDropDownOpen.value = true
       return
     }
@@ -99,9 +101,10 @@ const onClick = (e: Event) => {
     :class="{
       'h-full': column,
       '!text-gray-400': isKanban,
-      'flex-col !items-start justify-center pt-0.5': isExpandedForm && !isMobileMode,
-      'cursor-pointer hover:bg-gray-100': isExpandedForm && !isMobileMode && isUIAllowed('fieldEdit'),
-      'bg-gray-100': isExpandedForm ? editColumnDropdown || isDropDownOpen : false,
+      'flex-col !items-start justify-center pt-0.5': isExpandedForm && !isMobileMode && !isExpandedBulkUpdateForm,
+      'cursor-pointer hover:bg-gray-100':
+        isExpandedForm && !isMobileMode && isUIAllowed('fieldEdit') && !isExpandedBulkUpdateForm,
+      'bg-gray-100': isExpandedForm && !isExpandedBulkUpdateForm ? editColumnDropdown || isDropDownOpen : false,
     }"
     @dblclick="openHeaderMenu"
     @click.right="openDropDown"
@@ -111,7 +114,7 @@ const onClick = (e: Event) => {
       class="nc-cell-name-wrapper flex-1 flex items-center"
       :class="{
         'max-w-[calc(100%_-_23px)]': !isExpandedForm,
-        'max-w-full': isExpandedForm,
+        'max-w-full': isExpandedForm && !isExpandedBulkUpdateForm,
       }"
     >
       <template v-if="column && !props.hideIcon">
@@ -119,7 +122,7 @@ const onClick = (e: Event) => {
           v-if="isGrid"
           class="flex items-center"
           placement="bottom"
-          :disabled="isExpandedForm ? editColumnDropdown || isDropDownOpen : false"
+          :disabled="isExpandedForm && !isExpandedBulkUpdateForm ? editColumnDropdown || isDropDownOpen : false"
         >
           <template #title> {{ columnTypeName }} </template>
           <SmartsheetHeaderCellIcon
@@ -145,14 +148,14 @@ const onClick = (e: Event) => {
         class="name pl-1 max-w-full"
         placement="bottom"
         show-on-truncate-only
-        :disabled="isExpandedForm ? editColumnDropdown || isDropDownOpen : false"
+        :disabled="isExpandedForm && !isExpandedBulkUpdateForm ? editColumnDropdown || isDropDownOpen : false"
       >
         <template #title> {{ column.title }} </template>
 
         <span
           :data-test-id="column.title"
           :class="{
-            'select-none': isExpandedForm,
+            'select-none': isExpandedForm && !isExpandedBulkUpdateForm,
           }"
         >
           {{ column.title }}
@@ -162,7 +165,7 @@ const onClick = (e: Event) => {
       <span v-if="(column.rqd && !column.cdf) || required" class="text-red-500">&nbsp;*</span>
 
       <GeneralIcon
-        v-if="isExpandedForm && !isMobileMode && isUIAllowed('fieldEdit')"
+        v-if="isExpandedForm && !isExpandedBulkUpdateForm && !isMobileMode && isUIAllowed('fieldEdit')"
         icon="arrowDown"
         class="flex-none cursor-pointer ml-1 group-hover:visible w-4 h-4"
         :class="{
@@ -187,10 +190,10 @@ const onClick = (e: Event) => {
       v-model:visible="editColumnDropdown"
       class="h-full"
       :trigger="['click']"
-      :placement="isExpandedForm ? 'bottomLeft' : 'bottomRight'"
+      :placement="isExpandedForm && !isExpandedBulkUpdateForm ? 'bottomLeft' : 'bottomRight'"
       overlay-class-name="nc-dropdown-edit-column"
     >
-      <div v-if="isExpandedForm" class="h-[1px]" @dblclick.stop>&nbsp;</div>
+      <div v-if="isExpandedForm && !isExpandedBulkUpdateForm" class="h-[1px]" @dblclick.stop>&nbsp;</div>
       <div v-else />
 
       <template #overlay>
diff --git a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
index 60e0d7b402..5c43f0a35f 100644
--- a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
@@ -46,6 +46,8 @@ const isForm = inject(IsFormInj, ref(false))
 
 const isExpandedForm = inject(IsExpandedFormOpenInj, ref(false))
 
+const isExpandedBulkUpdateForm = inject(IsExpandedBulkUpdateFormOpenInj, ref(false))
+
 const colOptions = computed(() => column.value?.colOptions)
 
 const tableTile = computed(() => meta?.value?.title)
@@ -140,7 +142,7 @@ const closeAddColumnDropdown = () => {
 }
 
 const openHeaderMenu = (e?: MouseEvent) => {
-  if (isLocked.value || (isExpandedForm.value && e?.type === 'dblclick')) return
+  if (isLocked.value || (isExpandedForm.value && e?.type === 'dblclick') || isExpandedBulkUpdateForm.value) return
 
   if (!isForm.value && isUIAllowed('fieldEdit') && !isMobileMode.value) {
     editColumnDropdown.value = true
@@ -165,7 +167,7 @@ const onClick = (e: Event) => {
     e.preventDefault()
     e.stopPropagation()
   } else {
-    if (isExpandedForm.value && !editColumnDropdown.value) {
+    if (isExpandedForm.value && !editColumnDropdown.value && !isExpandedBulkUpdateForm.value) {
       isDropDownOpen.value = true
       return
     }
@@ -179,9 +181,10 @@ const onClick = (e: Event) => {
   <div
     class="flex items-center w-full h-full text-small text-gray-500 font-weight-medium group"
     :class="{
-      'flex-col !items-start justify-center pt-0.5': isExpandedForm && !isMobileMode,
-      'bg-gray-100': isExpandedForm ? editColumnDropdown || isDropDownOpen : false,
-      'cursor-pointer hover:bg-gray-100': isExpandedForm && !isMobileMode && isUIAllowed('fieldEdit'),
+      'flex-col !items-start justify-center pt-0.5': isExpandedForm && !isMobileMode && !isExpandedBulkUpdateForm,
+      'bg-gray-100': isExpandedForm && !isExpandedBulkUpdateForm ? editColumnDropdown || isDropDownOpen : false,
+      'cursor-pointer hover:bg-gray-100':
+        isExpandedForm && !isMobileMode && isUIAllowed('fieldEdit') && !isExpandedBulkUpdateForm,
     }"
     @dblclick="openHeaderMenu"
     @click.right="openDropDown"
@@ -191,7 +194,7 @@ const onClick = (e: Event) => {
       class="nc-virtual-cell-name-wrapper flex-1 flex items-center"
       :class="{
         'max-w-[calc(100%_-_23px)]': !isExpandedForm,
-        'max-w-full': isExpandedForm,
+        'max-w-full': isExpandedForm && !isExpandedBulkUpdateForm,
       }"
     >
       <template v-if="column && !props.hideIcon">
@@ -208,7 +211,7 @@ const onClick = (e: Event) => {
         <span
           :data-test-id="column.title"
           :class="{
-            'select-none': isExpandedForm,
+            'select-none': isExpandedForm && !isExpandedBulkUpdateForm,
           }"
         >
           {{ column.title }}
@@ -218,7 +221,7 @@ const onClick = (e: Event) => {
       <span v-if="isVirtualColRequired(column, meta?.columns || []) || required" class="text-red-500">&nbsp;*</span>
 
       <GeneralIcon
-        v-if="isExpandedForm && !isMobileMode && isUIAllowed('fieldEdit')"
+        v-if="isExpandedForm && !isMobileMode && isUIAllowed('fieldEdit') && !isExpandedBulkUpdateForm"
         icon="arrowDown"
         class="flex-none cursor-pointer ml-1 group-hover:visible w-4 h-4"
         :class="{
@@ -244,10 +247,10 @@ const onClick = (e: Event) => {
       v-model:visible="editColumnDropdown"
       class="h-full"
       :trigger="['click']"
-      :placement="isExpandedForm ? 'bottomLeft' : 'bottomRight'"
+      :placement="isExpandedForm && !isExpandedBulkUpdateForm ? 'bottomLeft' : 'bottomRight'"
       overlay-class-name="nc-dropdown-edit-column"
     >
-      <div v-if="isExpandedForm" class="h-[1px]" @dblclick.stop>&nbsp;</div>
+      <div v-if="isExpandedForm && !isExpandedBulkUpdateForm" class="h-[1px]" @dblclick.stop>&nbsp;</div>
       <div v-else />
       <template #overlay>
         <SmartsheetColumnEditOrAddProvider
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
index 2af2c610e0..d38127a357 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
@@ -85,8 +85,8 @@ eventBus.on(async (event, column: ColumnType) => {
         class="nc-table-toolbar-menu"
         :auto-save="true"
         data-testid="nc-filter-menu"
-        @update:filters-length="filtersLength = $event"
         :is-open="open"
+        @update:filters-length="filtersLength = $event"
       >
       </SmartsheetToolbarColumnFilter>
     </template>
diff --git a/packages/nc-gui/context/index.ts b/packages/nc-gui/context/index.ts
index 9ea625f127..fcb46a2061 100644
--- a/packages/nc-gui/context/index.ts
+++ b/packages/nc-gui/context/index.ts
@@ -19,6 +19,7 @@ export const IsGalleryInj: InjectionKey<Ref<boolean>> = Symbol('is-gallery-injec
 export const IsKanbanInj: InjectionKey<Ref<boolean>> = Symbol('is-kanban-injection')
 export const IsLockedInj: InjectionKey<Ref<boolean>> = Symbol('is-locked-injection')
 export const IsExpandedFormOpenInj: InjectionKey<Ref<boolean>> = Symbol('is-expanded-form-open-injection')
+export const IsExpandedBulkUpdateFormOpenInj: InjectionKey<Ref<boolean>> = Symbol('is-expanded-bulk-update-form-open-injection')
 export const CellValueInj: InjectionKey<Ref<any>> = Symbol('cell-value-injection')
 export const ActiveViewInj: InjectionKey<Ref<ViewType>> = Symbol('active-view-injection')
 export const ReadonlyInj: InjectionKey<Ref<boolean>> = Symbol('readonly-injection')
diff --git a/tests/playwright/pages/Dashboard/Form/index.ts b/tests/playwright/pages/Dashboard/Form/index.ts
index b2eeea39e8..3135243c2c 100644
--- a/tests/playwright/pages/Dashboard/Form/index.ts
+++ b/tests/playwright/pages/Dashboard/Form/index.ts
@@ -1,4 +1,5 @@
 import { expect, Locator } from '@playwright/test';
+import { StringValidationType, UITypes } from 'nocodb-sdk';
 import { DashboardPage } from '..';
 import BasePage from '../../Base';
 import { ToolbarPage } from '../common/Toolbar';
@@ -23,6 +24,11 @@ export class FormPage extends BasePage {
 
   readonly formFields: Locator;
 
+  // validation
+  readonly fieldPanel: Locator;
+  readonly customValidationBtn: Locator;
+  readonly customValidationDropdown: Locator;
+
   constructor(dashboard: DashboardPage) {
     super(dashboard.rootPage);
     this.dashboard = dashboard;
@@ -45,6 +51,11 @@ export class FormPage extends BasePage {
     this.afterSubmitMsg = dashboard.get().locator('[data-testid="nc-form-after-submit-msg"] .tiptap.ProseMirror');
 
     this.formFields = dashboard.get().locator('.nc-form-fields-list');
+
+    // validation
+    this.fieldPanel = dashboard.get().locator('.nc-form-field-right-panel');
+    this.customValidationBtn = this.fieldPanel.locator('.nc-custom-validation-btn');
+    this.customValidationDropdown = this.rootPage.locator('.nc-custom-validator-dropdown');
   }
 
   get() {
@@ -106,7 +117,7 @@ export class FormPage extends BasePage {
     await src.dragTo(dst);
   }
 
-  async removeField({ field, mode }: { mode: string; field: string }) {
+  async removeField({ field, mode }: { mode: 'dragDrop' | 'hideField'; field: string }) {
     // TODO: Otherwise form input boxes are not visible sometimes
     await this.rootPage.waitForTimeout(650);
 
@@ -177,17 +188,53 @@ export class FormPage extends BasePage {
     await expect.poll(async () => await this.formSubHeading.textContent()).toBe(param.subtitle);
   }
 
-  async fillForm(param: { field: string; value: string }[]) {
+  async fillForm(param: { field: string; value: string; type?: UITypes }[]) {
     for (let i = 0; i < param.length; i++) {
       await this.get()
         .locator(`[data-testid="nc-form-input-${param[i].field.replace(' ', '')}"]`)
         .click();
-      await this.get()
-        .locator(`[data-testid="nc-form-input-${param[i].field.replace(' ', '')}"] >> input`)
-        .fill(param[i].value);
+
+      switch (param[i].type) {
+        case UITypes.LongText: {
+          await this.get()
+            .locator(`[data-testid="nc-form-input-${param[i].field.replace(' ', '')}"] >> textarea`)
+            .fill(param[i].value);
+
+          break;
+        }
+        default: {
+          await this.get()
+            .locator(`[data-testid="nc-form-input-${param[i].field.replace(' ', '')}"] >> input`)
+            .fill(param[i].value);
+
+          if ([UITypes.Date, UITypes.Time, UITypes.Year, UITypes.DateTime].includes(param[i].type)) {
+            await this.rootPage.keyboard.press('Enter');
+          }
+
+          await this.getVisibleField({ title: param[i].field }).click();
+        }
+      }
+
+      await this.rootPage.waitForTimeout(200);
     }
   }
 
+  getVisibleField({ title }: { title: string }) {
+    return this.get()
+      .locator(`.nc-form-drag-${title.replace(' ', '')}`)
+      .locator('[data-testid="nc-form-input-label"]');
+  }
+
+  async selectVisibleField({ title }: { title: string }) {
+    const field = this.getVisibleField({ title });
+
+    await field.scrollIntoViewIfNeeded();
+    await field.click();
+
+    // Wait for field settings right pannel
+    await this.fieldPanel.waitFor({ state: 'visible' });
+  }
+
   async configureField({
     field,
     required,
@@ -206,10 +253,7 @@ export class FormPage extends BasePage {
         httpMethodsToMatch: ['PATCH'],
       });
 
-    await this.get()
-      .locator(`.nc-form-drag-${field.replace(' ', '')}`)
-      .locator('[data-testid="nc-form-input-label"]')
-      .click();
+    await this.selectVisibleField({ title: field });
 
     await waitForResponse(() => this.getFormFieldsInputLabel().fill(label));
     await waitForResponse(() => this.getFormFieldsInputHelpText().fill(helpText));
@@ -234,9 +278,8 @@ export class FormPage extends BasePage {
     if (required) expectText = label + ' *';
     else expectText = label;
 
-    const fieldLabel = this.get()
-      .locator(`.nc-form-drag-${field.replace(' ', '')}`)
-      .locator('div[data-testid="nc-form-input-label"]');
+    const fieldLabel = this.getVisibleField({ title: field });
+    await fieldLabel.scrollIntoViewIfNeeded();
     await expect(fieldLabel).toHaveText(expectText);
 
     const fieldHelpText = this.get()
@@ -300,4 +343,631 @@ export class FormPage extends BasePage {
       ).toBeVisible();
     }
   }
+
+  async getCustomValidationTypeOption({
+    type,
+    currValItem,
+    index,
+  }: {
+    type: StringValidationType;
+    currValItem: Locator;
+    index: number;
+  }) {
+    await currValItem.locator('.nc-custom-validation-type-selector .ant-select-selector').click();
+
+    const typeSelectorDropdown = this.rootPage.locator(`.nc-custom-validation-type-dropdown-${index}`);
+    await typeSelectorDropdown.waitFor();
+
+    const option = typeSelectorDropdown.getByTestId(`nc-custom-validation-type-option-${type}`);
+    await option.scrollIntoViewIfNeeded();
+
+    return {
+      option: this.rootPage.getByTestId(`nc-custom-validation-type-option-${type}`),
+      select: async () => {
+        await option.click();
+        await typeSelectorDropdown.waitFor({ state: 'hidden' });
+      },
+      closeSelector: async () =>
+        await currValItem.locator('.nc-custom-validation-type-selector .ant-select-selector').click(),
+      verify: async ({ isDisabled = false }: { isDisabled: boolean }) => {
+        if (isDisabled) {
+          await expect(option).toHaveClass(/ant-select-item-option-disabled/);
+        } else {
+          await expect(option).not.toHaveClass(/ant-select-item-option-disabled/);
+        }
+      },
+    };
+  }
+
+  async addCustomValidation({
+    type,
+    value,
+    errorMsg,
+    index,
+  }: {
+    type: StringValidationType;
+    value: string;
+    errorMsg?: string;
+    index: number;
+  }) {
+    await this.customValidationBtn.waitFor({ state: 'visible' });
+    await this.customValidationBtn.click();
+
+    const dropdown = this.customValidationDropdown;
+    await dropdown.waitFor({ state: 'visible' });
+
+    await dropdown.locator('.nc-custom-validation-add-btn').click();
+
+    const currValItem = this.customValidationDropdown.getByTestId(`nc-custom-validation-item-${index}`);
+
+    await currValItem.waitFor({ state: 'visible' });
+
+    // Select type
+    const { select } = await this.getCustomValidationTypeOption({ type, currValItem, index });
+    await select();
+
+    // add value
+    const valValueInput = currValItem.locator('.custom-validation-input >> input');
+    await valValueInput.click();
+    await valValueInput.fill(value);
+
+    if (errorMsg !== undefined) {
+      const valErrorMsgInput = currValItem.locator('.nc-custom-validation-error-message-input');
+      await valErrorMsgInput.click();
+      await valErrorMsgInput.fill(errorMsg);
+    }
+
+    //close dropdown
+    await this.customValidationBtn.click();
+    await dropdown.waitFor({ state: 'hidden' });
+  }
+
+  async updateCustomValidation({
+    type,
+    value,
+    errorMsg,
+    index,
+  }: {
+    type?: StringValidationType;
+    value?: string;
+    errorMsg?: string;
+    index: number;
+  }) {
+    await this.customValidationBtn.waitFor({ state: 'visible' });
+    await this.customValidationBtn.click();
+
+    const dropdown = this.customValidationDropdown;
+    await dropdown.waitFor({ state: 'visible' });
+
+    const currValItem = this.customValidationDropdown.getByTestId(`nc-custom-validation-item-${index}`);
+
+    await currValItem.waitFor({ state: 'visible' });
+
+    if (type) {
+      // Select type
+      const { select } = await this.getCustomValidationTypeOption({ type, currValItem, index });
+      await select();
+    }
+
+    // update value
+    if (value !== undefined) {
+      const valValueInput = currValItem.locator('.custom-validation-input >> input');
+      await valValueInput.click();
+      await valValueInput.fill(value);
+    }
+
+    if (errorMsg !== undefined) {
+      const valErrorMsgInput = currValItem.locator('.nc-custom-validation-error-message-input');
+      await valErrorMsgInput.click();
+      await valErrorMsgInput.fill(errorMsg);
+    }
+
+    //close dropdown
+    await this.customValidationBtn.click();
+    await dropdown.waitFor({ state: 'hidden' });
+  }
+
+  async verifyCustomValidationSelector({
+    type,
+    value: _value,
+    errorMsg: _errorMsg,
+    index,
+  }: {
+    type: StringValidationType;
+    value?: string;
+    errorMsg?: string;
+    index: number;
+  }) {
+    await this.customValidationBtn.waitFor({ state: 'visible' });
+    await this.customValidationBtn.click();
+
+    const dropdown = this.customValidationDropdown;
+    await dropdown.waitFor({ state: 'visible' });
+
+    const currValItem = this.customValidationDropdown.getByTestId(`nc-custom-validation-item-${index}`);
+    await currValItem.waitFor({ state: 'visible' });
+
+    const { verify } = await this.getCustomValidationTypeOption({
+      type,
+      currValItem,
+      index,
+    });
+    await verify({ isDisabled: true });
+
+    //close dropdown
+    await this.customValidationBtn.click();
+    await dropdown.waitFor({ state: 'hidden' });
+  }
+  async verifyCustomValidationValue({ value, hasError, index }: { value?: string; hasError?: boolean; index: number }) {
+    await this.customValidationBtn.waitFor({ state: 'visible' });
+    await this.customValidationBtn.click();
+
+    const dropdown = this.customValidationDropdown;
+    await dropdown.waitFor({ state: 'visible' });
+
+    const currValItem = this.customValidationDropdown.getByTestId(`nc-custom-validation-item-${index}`);
+    await currValItem.waitFor({ state: 'visible' });
+
+    //  value
+    if (value !== undefined) {
+      const valValueInput = currValItem.locator('.custom-validation-input >> input');
+      await expect(valValueInput).toHaveValue(value);
+    }
+
+    if (hasError) {
+      const valValueErr = currValItem.locator(
+        '.nc-custom-validation-input-wrapper .nc-custom-validation-item-error-icon'
+      );
+
+      await expect(valValueErr).toBeVisible();
+    }
+
+    //close dropdown
+    await this.customValidationBtn.click();
+    await dropdown.waitFor({ state: 'hidden' });
+  }
+
+  async removeCustomValidationItem({ index }: { index: number }) {
+    await this.customValidationBtn.waitFor({ state: 'visible' });
+    await this.customValidationBtn.click();
+
+    const dropdown = this.customValidationDropdown;
+    await dropdown.waitFor({ state: 'visible' });
+
+    const currValItem = this.customValidationDropdown.getByTestId(`nc-custom-validation-item-${index}`);
+    await currValItem.waitFor({ state: 'visible' });
+
+    await currValItem.locator('.nc-custom-validation-delete-item').click();
+
+    await currValItem.waitFor({ state: 'hidden' });
+
+    //close dropdown
+    await this.customValidationBtn.click();
+    await dropdown.waitFor({ state: 'hidden' });
+  }
+
+  async verifyCustomValidationCount({ count }: { count: number }) {
+    await this.customValidationBtn.waitFor({ state: 'visible' });
+    const countStr = await this.customValidationBtn.locator('.nc-custom-validation-count').textContent();
+
+    expect(parseInt(countStr) || 0).toEqual(count);
+  }
+
+  async getFormFieldsEmailPhoneUrlValidatorConfig({
+    type,
+  }: {
+    type: UITypes.Email | UITypes.PhoneNumber | UITypes.URL;
+  }) {
+    const validateBtn = this.get().getByTestId(`nc-form-field-validate-${type}`);
+
+    return {
+      locator: validateBtn,
+      click: async ({ enable }: { enable: boolean }) => {
+        await validateBtn.waitFor({ state: 'visible' });
+
+        const isEnabled = await validateBtn.isChecked();
+
+        if ((enable && !isEnabled) || (!enable && isEnabled)) {
+          await this.waitForResponse({
+            uiAction: async () => {
+              await validateBtn.click();
+            },
+            requestUrlPathToMatch: '/api/v1/db/meta/form-columns',
+            httpMethodsToMatch: ['PATCH'],
+          });
+        }
+      },
+      verify: async ({ isEnabled, isDisabled }: { isEnabled?: boolean; isDisabled?: boolean }) => {
+        await validateBtn.waitFor({ state: 'visible' });
+
+        if (isEnabled !== undefined) {
+          if (isEnabled) {
+            await expect(validateBtn).toBeChecked();
+          } else {
+            await expect(validateBtn).not.toBeChecked();
+          }
+        }
+
+        if (isDisabled !== undefined) {
+          if (isDisabled) {
+            await expect(validateBtn).toBeDisabled();
+          } else {
+            await expect(validateBtn).not.toBeDisabled();
+          }
+        }
+      },
+    };
+  }
+
+  async getFormFieldsValidateWorkEmailConfig() {
+    const validateWorkEmailBtn = this.get().getByTestId('nc-form-field-allow-only-work-email');
+
+    return {
+      locator: validateWorkEmailBtn,
+      click: async ({ enable }: { enable: boolean }) => {
+        await validateWorkEmailBtn.waitFor({ state: 'visible' });
+
+        const isEnabled = await validateWorkEmailBtn.isChecked();
+
+        if ((enable && !isEnabled) || (!enable && isEnabled)) {
+          await this.waitForResponse({
+            uiAction: async () => {
+              await validateWorkEmailBtn.click();
+            },
+            requestUrlPathToMatch: '/api/v1/db/meta/form-columns',
+            httpMethodsToMatch: ['PATCH'],
+          });
+        }
+      },
+      verify: async ({
+        isEnabled,
+        isDisabled,
+        isVisible,
+      }: {
+        isEnabled?: boolean;
+        isDisabled?: boolean;
+        isVisible?: boolean;
+      }) => {
+        if (isEnabled !== undefined) {
+          await validateWorkEmailBtn.waitFor({ state: 'visible' });
+
+          if (isEnabled) {
+            await expect(validateWorkEmailBtn).toBeChecked();
+          } else {
+            await expect(validateWorkEmailBtn).not.toBeChecked();
+          }
+        }
+
+        if (isDisabled !== undefined) {
+          await validateWorkEmailBtn.waitFor({ state: 'visible' });
+
+          if (isDisabled) {
+            await expect(validateWorkEmailBtn).toBeDisabled();
+          } else {
+            await expect(validateWorkEmailBtn).not.toBeDisabled();
+          }
+        }
+
+        if (isVisible !== undefined) {
+          if (isVisible) {
+            await expect(validateWorkEmailBtn).toBeVisible();
+          } else {
+            await expect(validateWorkEmailBtn).not.toBeVisible();
+          }
+        }
+      },
+    };
+  }
+
+  async getFormFieldErrors({ title }: { title: string }) {
+    // ant-form-item-explain
+    const field = this.get().locator(`.nc-form-drag-${title.replace(' ', '')}`);
+    await field.scrollIntoViewIfNeeded();
+    const fieldErrorEl = field.locator('.ant-form-item-explain');
+
+    return {
+      locator: fieldErrorEl,
+      verify: async ({ hasError, hasErrorMsg }: { hasError?: boolean; hasErrorMsg?: string | RegExp }) => {
+        if (hasError !== undefined) {
+          if (hasError) {
+            await expect(fieldErrorEl).toBeVisible();
+          } else {
+            await expect(fieldErrorEl).not.toBeVisible();
+          }
+        }
+
+        if (hasErrorMsg !== undefined) {
+          await expect(fieldErrorEl).toBeVisible();
+
+          await expect(fieldErrorEl.locator('> div').filter({ hasText: hasErrorMsg }).first()).toHaveText(hasErrorMsg);
+        }
+      },
+    };
+  }
+
+  async addLimitToRangeMinOrMax({ type, isMinValue, value }: { type: UITypes; isMinValue: boolean; value: string }) {
+    const fieldLocator = this.get().getByTestId(`nc-limit-to-range-${isMinValue ? 'min' : 'max'}-${type}`);
+
+    switch (type) {
+      default: {
+        await fieldLocator.locator('input:visible').waitFor();
+
+        await this.waitForResponse({
+          uiAction: async () => {
+            await fieldLocator.locator(`input`).click();
+            await fieldLocator.locator(`input`).fill(value);
+            await this.rootPage.keyboard.press('Enter');
+          },
+          requestUrlPathToMatch: '/api/v1/db/meta/form-columns',
+          httpMethodsToMatch: ['PATCH'],
+        });
+      }
+    }
+  }
+
+  async getFormFieldsValidateLimitToRange({ type }: { type: UITypes }) {
+    const validateBtn = this.get().getByTestId(`nc-limit-to-range-${type}`);
+
+    return {
+      locator: validateBtn,
+      click: async ({ enable, min, max }: { enable: boolean; min?: string; max?: string }) => {
+        await validateBtn.waitFor({ state: 'visible' });
+
+        const isEnabled = await validateBtn.isChecked();
+
+        if (enable && !isEnabled) {
+          await validateBtn.click();
+          await this.get().locator('.nc-limit-to-range-wrapper').first().waitFor({ state: 'visible' });
+
+          if (min !== undefined) {
+            await this.addLimitToRangeMinOrMax({ type, isMinValue: true, value: min });
+          }
+
+          if (max !== undefined) {
+            await this.addLimitToRangeMinOrMax({ type, isMinValue: false, value: max });
+          }
+        } else if (!enable && isEnabled) {
+          await this.waitForResponse({
+            uiAction: async () => {
+              await validateBtn.click();
+            },
+            requestUrlPathToMatch: '/api/v1/db/meta/form-columns',
+            httpMethodsToMatch: ['PATCH'],
+          });
+        }
+      },
+      verify: async ({
+        isEnabled,
+        isDisabled,
+        isVisible,
+      }: {
+        isEnabled?: boolean;
+        isDisabled?: boolean;
+        isVisible?: boolean;
+      }) => {
+        if (isEnabled !== undefined) {
+          await validateBtn.waitFor({ state: 'visible' });
+
+          if (isEnabled) {
+            await expect(validateBtn).toBeChecked();
+          } else {
+            await expect(validateBtn).not.toBeChecked();
+          }
+        }
+
+        if (isDisabled !== undefined) {
+          await validateBtn.waitFor({ state: 'visible' });
+
+          if (isDisabled) {
+            await expect(validateBtn).toBeDisabled();
+          } else {
+            await expect(validateBtn).not.toBeDisabled();
+          }
+        }
+
+        if (isVisible !== undefined) {
+          if (isVisible) {
+            await expect(validateWorkEmailBtn).toBeVisible();
+          } else {
+            await expect(validateWorkEmailBtn).not.toBeVisible();
+          }
+        }
+      },
+    };
+  }
+
+  async getFormFieldsValidateAttFileType() {
+    const validateBtn = this.get().getByTestId('nc-att-limit-file-type');
+    const validationWrapper = this.get().locator('.nc-att-limit-file-type-wrapper');
+    await validateBtn.scrollIntoViewIfNeeded();
+
+    return {
+      locator: validateBtn,
+      click: async ({ enable, fillValue }: { enable: boolean; fillValue?: string }) => {
+        await validateBtn.waitFor({ state: 'visible' });
+
+        const isEnabled = await validateBtn.isChecked();
+
+        if (enable && !isEnabled) {
+          await validateBtn.click();
+        } else if (!enable && isEnabled) {
+          await this.waitForResponse({
+            uiAction: async () => {
+              await validateBtn.click();
+            },
+            requestUrlPathToMatch: '/api/v1/db/meta/form-columns',
+            httpMethodsToMatch: ['PATCH'],
+          });
+        }
+        if (enable && fillValue !== undefined) {
+          await validationWrapper.locator('input').first().waitFor({ state: 'visible' });
+
+          await this.waitForResponse({
+            uiAction: async () => {
+              await validationWrapper.locator('input').fill(fillValue);
+            },
+            requestUrlPathToMatch: '/api/v1/db/meta/form-columns',
+            httpMethodsToMatch: ['PATCH'],
+          });
+        }
+      },
+      verify: async ({ isEnabled, hasError }: { isEnabled?: boolean; hasError?: boolean }) => {
+        if (isEnabled !== undefined) {
+          await validateBtn.waitFor({ state: 'visible' });
+
+          if (isEnabled) {
+            await expect(validateBtn).toBeChecked();
+          } else {
+            await expect(validateBtn).not.toBeChecked();
+          }
+        }
+
+        if (hasError !== undefined) {
+          await validateBtn.waitFor({ state: 'visible' });
+          await validationWrapper.waitFor({ state: 'visible' });
+
+          if (hasError) {
+            await expect(validationWrapper.locator('.validation-input-error')).toBeVisible();
+          } else {
+            await expect(validationWrapper.locator('.validation-input-error')).not.toBeVisible();
+          }
+        }
+      },
+    };
+  }
+  async getFormFieldsValidateAttFileCount() {
+    const validateBtn = this.get().getByTestId('nc-att-limit-file-count');
+    const validationWrapper = this.get().locator('.nc-att-limit-file-count-wrapper');
+    await validateBtn.scrollIntoViewIfNeeded();
+
+    return {
+      locator: validateBtn,
+      click: async ({ enable, fillValue }: { enable: boolean; fillValue?: string }) => {
+        await validateBtn.waitFor({ state: 'visible' });
+
+        const isEnabled = await validateBtn.isChecked();
+
+        if (enable && !isEnabled) {
+          await validateBtn.click();
+        } else if (!enable && isEnabled) {
+          await this.waitForResponse({
+            uiAction: async () => {
+              await validateBtn.click();
+            },
+            requestUrlPathToMatch: '/api/v1/db/meta/form-columns',
+            httpMethodsToMatch: ['PATCH'],
+          });
+        }
+        if (enable && fillValue !== undefined) {
+          await validationWrapper.locator('input').first().waitFor({ state: 'visible' });
+
+          await this.waitForResponse({
+            uiAction: async () => {
+              await validationWrapper.locator('input').fill(fillValue);
+            },
+            requestUrlPathToMatch: '/api/v1/db/meta/form-columns',
+            httpMethodsToMatch: ['PATCH'],
+          });
+        }
+      },
+      verify: async ({ isEnabled, hasError }: { isEnabled?: boolean; hasError?: boolean }) => {
+        if (isEnabled !== undefined) {
+          await validateBtn.waitFor({ state: 'visible' });
+
+          if (isEnabled) {
+            await expect(validateBtn).toBeChecked();
+          } else {
+            await expect(validateBtn).not.toBeChecked();
+          }
+        }
+
+        if (hasError !== undefined) {
+          await validateBtn.waitFor({ state: 'visible' });
+          await validationWrapper.waitFor({ state: 'visible' });
+
+          if (hasError) {
+            await expect(validationWrapper.locator('.validation-input-error')).toBeVisible();
+          } else {
+            await expect(validationWrapper.locator('.validation-input-error')).not.toBeVisible();
+          }
+        }
+      },
+    };
+  }
+  async getFormFieldsValidateAttFileSize() {
+    const validateBtn = this.get().getByTestId('nc-att-limit-file-size');
+    const validationWrapper = this.get().locator('.nc-att-limit-file-size-wrapper');
+    await validateBtn.scrollIntoViewIfNeeded();
+
+    return {
+      locator: validateBtn,
+      click: async ({
+        enable,
+        fillValue,
+        unit = 'KB',
+      }: {
+        enable: boolean;
+        fillValue?: string;
+        unit?: 'KB' | 'MB';
+      }) => {
+        await validateBtn.waitFor({ state: 'visible' });
+
+        const isEnabled = await validateBtn.isChecked();
+
+        if (enable && !isEnabled) {
+          await validateBtn.click();
+        } else if (!enable && isEnabled) {
+          await this.waitForResponse({
+            uiAction: async () => {
+              await validateBtn.click();
+            },
+            requestUrlPathToMatch: '/api/v1/db/meta/form-columns',
+            httpMethodsToMatch: ['PATCH'],
+          });
+        }
+
+        if (enable && fillValue !== undefined) {
+          await validationWrapper.locator('.nc-validation-input-wrapper input').first().waitFor({ state: 'visible' });
+
+          await validationWrapper.locator('.ant-select-selector').click();
+          const dropdown = this.rootPage.locator('.nc-att-limit-file-size-unit-selector-dropdown');
+          await dropdown.waitFor({ state: 'visible' });
+          const option = dropdown.locator('.ant-select-item-option').getByText(unit);
+          await option.scrollIntoViewIfNeeded();
+          await option.waitFor({ state: 'visible' });
+          await option.click();
+
+          await this.waitForResponse({
+            uiAction: async () => {
+              await validationWrapper.locator('.nc-validation-input-wrapper input').fill(fillValue);
+            },
+            requestUrlPathToMatch: '/api/v1/db/meta/form-columns',
+            httpMethodsToMatch: ['PATCH'],
+          });
+        }
+      },
+      verify: async ({ isEnabled, hasError }: { isEnabled?: boolean; hasError?: boolean }) => {
+        if (isEnabled !== undefined) {
+          await validateBtn.waitFor({ state: 'visible' });
+
+          if (isEnabled) {
+            await expect(validateBtn).toBeChecked();
+          } else {
+            await expect(validateBtn).not.toBeChecked();
+          }
+        }
+
+        if (hasError !== undefined) {
+          await validateBtn.waitFor({ state: 'visible' });
+          await validationWrapper.waitFor({ state: 'visible' });
+
+          if (hasError) {
+            await expect(validationWrapper.locator('.validation-input-error')).toBeVisible();
+          } else {
+            await expect(validationWrapper.locator('.validation-input-error')).not.toBeVisible();
+          }
+        }
+      },
+    };
+  }
 }
diff --git a/tests/playwright/pages/Dashboard/SurveyForm/index.ts b/tests/playwright/pages/Dashboard/SurveyForm/index.ts
index cfa74082bb..958f01b3bd 100644
--- a/tests/playwright/pages/Dashboard/SurveyForm/index.ts
+++ b/tests/playwright/pages/Dashboard/SurveyForm/index.ts
@@ -1,8 +1,12 @@
 import { expect, Locator, Page } from '@playwright/test';
+import { UITypes } from 'nocodb-sdk';
 import BasePage from '../../Base';
 import { getTextExcludeIconText } from '../../../tests/utils/general';
+import { CellPageObject } from '../common/Cell';
 
 export class SurveyFormPage extends BasePage {
+  readonly cell: CellPageObject;
+
   readonly formHeading: Locator;
   readonly formSubHeading: Locator;
   readonly fillFormButton: Locator;
@@ -16,6 +20,7 @@ export class SurveyFormPage extends BasePage {
 
   constructor(rootPage: Page) {
     super(rootPage);
+    this.cell = new CellPageObject(this);
     this.formHeading = this.get().locator('[data-testid="nc-survey-form__heading"]');
     this.formSubHeading = this.get().locator('[data-testid="nc-survey-form__sub-heading"]');
     this.fillFormButton = this.get().locator('[data-testid="nc-survey-form__fill-form-btn"]');
@@ -69,21 +74,44 @@ export class SurveyFormPage extends BasePage {
     }
   }
 
-  async fill(param: { fieldLabel: string; type?: string; value?: string }) {
+  async fill(param: { fieldLabel: string; type?: string; value?: string; skipNavigation?: boolean }) {
     await this.get().locator(`[data-testid="nc-survey-form__input-${param.fieldLabel}"]`).click();
+
     if (param.type === 'SingleLineText') {
       await this.get().locator(`[data-testid="nc-survey-form__input-${param.fieldLabel}"] >> input`).fill(param.value);
-      // press enter key
-      await this.get().locator(`[data-testid="nc-survey-form__input-${param.fieldLabel}"] >> input`).press('Enter');
     } else if (param.type === 'DateTime') {
       await this.get().locator(`[data-testid="nc-survey-form__input-${param.fieldLabel}"] >> input`).first().click();
       const modal = this.rootPage.locator('.nc-picker-datetime');
       await expect(modal).toBeVisible();
       await modal.locator('.nc-date-picker-now-btn').click();
       await modal.waitFor({ state: 'hidden' });
-      await this.nextButton.click();
+    } else if (param.type === UITypes.LongText) {
+      await this.get()
+        .locator(`[data-testid="nc-survey-form__input-${param.fieldLabel}"] >> textarea`)
+        .waitFor({ state: 'visible' });
+      await this.get().locator(`[data-testid="nc-survey-form__input-${param.fieldLabel}"] >> textarea`).click();
+
+      await this.get()
+        .locator(`[data-testid="nc-survey-form__input-${param.fieldLabel}"] >> textarea`)
+        .fill(param.value);
+    } else {
+      await this.get()
+        .locator(`[data-testid="nc-survey-form__input-${param.fieldLabel}"] >> input`)
+        .waitFor({ state: 'visible' });
+
+      await this.get().locator(`[data-testid="nc-survey-form__input-${param.fieldLabel}"] >> input`).fill(param.value);
+
+      if ([UITypes.Date, UITypes.Time, UITypes.Year, UITypes.DateTime].includes(param.type)) {
+        // press enter key
+        await this.get().locator(`[data-testid="nc-survey-form__input-${param.fieldLabel}"] >> input`).press('Enter');
+      }
     }
 
+    await this.get().locator(`[data-testid="nc-form-column-label"]`).click();
+
+    if (!param.skipNavigation) {
+      await this.nextButton.click();
+    }
     // post next button click, allow transitions to complete
     await this.rootPage.waitForTimeout(100);
   }
@@ -112,4 +140,26 @@ export class SurveyFormPage extends BasePage {
 
     await this.submitButton.waitFor({ state: 'hidden' });
   }
+
+  async getFormFieldErrors() {
+    const fieldErrorEl = this.get().locator('.ant-form-item-explain');
+    return {
+      locator: fieldErrorEl,
+      verify: async ({ hasError, hasErrorMsg }: { hasError?: boolean; hasErrorMsg?: string | RegExp }) => {
+        if (hasError !== undefined) {
+          if (hasError) {
+            await expect(fieldErrorEl).toBeVisible();
+          } else {
+            await expect(fieldErrorEl).not.toBeVisible();
+          }
+        }
+
+        if (hasErrorMsg !== undefined) {
+          await expect(fieldErrorEl).toBeVisible();
+
+          await expect(fieldErrorEl.locator('> div').filter({ hasText: hasErrorMsg }).first()).toHaveText(hasErrorMsg);
+        }
+      },
+    };
+  }
 }
diff --git a/tests/playwright/pages/Dashboard/common/Cell/AttachmentCell.ts b/tests/playwright/pages/Dashboard/common/Cell/AttachmentCell.ts
index 0a6b292ecc..cdf6694ba3 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/AttachmentCell.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/AttachmentCell.ts
@@ -33,6 +33,22 @@ export class AttachmentCellPageObject extends BasePage {
     await this.rootPage.waitForTimeout(750);
   }
 
+  async removeFile({ attIndex, index, columnHeader }: { attIndex: number; index?: number; columnHeader: string }) {
+    await this.get({ index, columnHeader }).scrollIntoViewIfNeeded();
+    await this.get({ index, columnHeader }).click({ position: { x: 1, y: 1 } });
+
+    await this.get({ index, columnHeader }).locator('.nc-attachment-item').nth(attIndex).hover();
+    await this.get({ index, columnHeader })
+      .locator('.nc-attachment-item')
+      .nth(attIndex)
+      .locator('.nc-attachment-remove')
+      .click();
+
+    await this.rootPage.locator('.ant-modal.active').waitFor({ state: 'visible' });
+    await this.rootPage.locator('.ant-modal.active').getByTestId('nc-delete-modal-delete-btn').click();
+    await this.rootPage.locator('.ant-modal.active').waitFor({ state: 'hidden' });
+  }
+
   async expandModalAddFile({ filePath }: { filePath: string[] }) {
     const attachFileAction = this.rootPage
       .locator('.ant-modal.nc-attachment-modal.active')
diff --git a/tests/playwright/pages/Dashboard/common/Cell/index.ts b/tests/playwright/pages/Dashboard/common/Cell/index.ts
index f64b9824aa..7a4828792f 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/index.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/index.ts
@@ -1,4 +1,5 @@
 import { expect, Locator } from '@playwright/test';
+import { UITypes } from 'nocodb-sdk';
 import { GridPage } from '../../Grid';
 import BasePage from '../../../Base';
 import { AttachmentCellPageObject } from './AttachmentCell';
@@ -14,6 +15,7 @@ import { YearCellPageObject } from './YearCell';
 import { TimeCellPageObject } from './TimeCell';
 import { GroupPageObject } from '../../Grid/Group';
 import { UserOptionCellPageObject } from './UserOptionCell';
+import { SurveyFormPage } from '../../SurveyForm';
 
 export interface CellProps {
   indexMap?: Array<number>;
@@ -22,7 +24,7 @@ export interface CellProps {
 }
 
 export class CellPageObject extends BasePage {
-  readonly parent: GridPage | SharedFormPage | GroupPageObject;
+  readonly parent: GridPage | SharedFormPage | SurveyFormPage | GroupPageObject;
   readonly selectOption: SelectOptionCellPageObject;
   readonly attachment: AttachmentCellPageObject;
   readonly checkbox: CheckboxCellPageObject;
@@ -34,7 +36,7 @@ export class CellPageObject extends BasePage {
   readonly dateTime: DateTimeCellPageObject;
   readonly userOption: UserOptionCellPageObject;
 
-  constructor(parent: GridPage | SharedFormPage | GroupPageObject) {
+  constructor(parent: GridPage | SharedFormPage | SurveyFormPage | GroupPageObject) {
     super(parent.rootPage);
     this.parent = parent;
     this.selectOption = new SelectOptionCellPageObject(this);
@@ -52,6 +54,11 @@ export class CellPageObject extends BasePage {
   get({ indexMap, index, columnHeader }: CellProps): Locator {
     if (this.parent instanceof SharedFormPage) {
       return this.parent.get().locator(`[data-testid="nc-form-input-cell-${columnHeader}"]`).first();
+    } else if (this.parent instanceof SurveyFormPage) {
+      return this.parent
+        .get()
+        .locator(`[data-testid="nc-survey-form__input-${columnHeader.replace(' ', '')}"]`)
+        .first();
     } else if (this.parent instanceof GridPage) {
       return this.parent.get().locator(`td[data-testid="cell-${columnHeader}-${index}"]`).first();
     } else {
@@ -68,7 +75,7 @@ export class CellPageObject extends BasePage {
     return await this.get({ index, columnHeader }).dblclick();
   }
 
-  async fillText({ index, columnHeader, text }: CellProps & { text: string }) {
+  async fillText({ index, columnHeader, text, type }: CellProps & { text: string; type?: UITypes }) {
     await this.dblclick({
       index,
       columnHeader,
@@ -84,6 +91,10 @@ export class CellPageObject extends BasePage {
 
     if (await isInputBox()) {
       await this.get({ index, columnHeader }).locator('input').fill(text);
+
+      if (type && [UITypes.Date, UITypes.Time, UITypes.Year, UITypes.DateTime].includes(type)) {
+        await this.rootPage.keyboard.press('Enter');
+      }
     } else {
       await this.get({ index, columnHeader }).locator('textarea').fill(text);
     }
diff --git a/tests/playwright/pages/SharedForm/index.ts b/tests/playwright/pages/SharedForm/index.ts
index 252beb1dc1..18b7c01dbf 100644
--- a/tests/playwright/pages/SharedForm/index.ts
+++ b/tests/playwright/pages/SharedForm/index.ts
@@ -75,4 +75,36 @@ export class SharedFormPage extends BasePage {
       .locator('.nc-list-item-link-unlink-btn')
       .click();
   }
+
+  fieldLabel({ title }: { title: string }) {
+    return this.get()
+      .getByTestId(`nc-shared-form-item-${title.replace(' ', '')}`)
+      .locator('.nc-form-column-label');
+  }
+
+  async getFormFieldErrors({ title }: { title: string }) {
+    const field = this.get().getByTestId(`nc-shared-form-item-${title.replace(' ', '')}`);
+    await field.scrollIntoViewIfNeeded();
+    const fieldErrorEl = field.locator('.ant-form-item-explain');
+    return {
+      locator: fieldErrorEl,
+      verify: async ({ hasError, hasErrorMsg }: { hasError?: boolean; hasErrorMsg?: string | RegExp }) => {
+        if (hasError !== undefined) {
+          if (hasError) {
+            await fieldErrorEl.waitFor({ state: 'visible' });
+
+            await expect(fieldErrorEl).toBeVisible();
+          } else {
+            await expect(fieldErrorEl).not.toBeVisible();
+          }
+        }
+
+        if (hasErrorMsg !== undefined) {
+          await fieldErrorEl.waitFor({ state: 'visible' });
+
+          await expect(fieldErrorEl.locator('> div').filter({ hasText: hasErrorMsg }).first()).toHaveText(hasErrorMsg);
+        }
+      },
+    };
+  }
 }
diff --git a/tests/playwright/tests/db/views/viewForm.spec.ts b/tests/playwright/tests/db/views/viewForm.spec.ts
index ea14db981e..e43a59cabc 100644
--- a/tests/playwright/tests/db/views/viewForm.spec.ts
+++ b/tests/playwright/tests/db/views/viewForm.spec.ts
@@ -3,10 +3,11 @@ import { DashboardPage } from '../../../pages/Dashboard';
 import setup, { unsetup } from '../../../setup';
 import { FormPage } from '../../../pages/Dashboard/Form';
 import { SharedFormPage } from '../../../pages/SharedForm';
-import { Api, UITypes } from 'nocodb-sdk';
+import { Api, StringValidationType, UITypes } from 'nocodb-sdk';
 import { LoginPage } from '../../../pages/LoginPage';
 import { getDefaultPwd } from '../../../tests/utils/general';
 import { enableQuickRun, isEE } from '../../../setup/db';
+import { SurveyFormPage } from '../../../pages/Dashboard/SurveyForm';
 
 // todo: Move most of the ui actions to page object and await on the api response
 test.describe('Form view', () => {
@@ -252,7 +253,7 @@ test.describe('Form view with LTAR', () => {
     loginPage = new LoginPage(page);
 
     api = new Api({
-      baseURL: `http://localhost:8080/`,
+      baseURL: 'http://localhost:8080/',
       headers: {
         'xc-auth': context.token,
       },
@@ -408,7 +409,7 @@ test.describe('Form view', () => {
 
   test('Select fields in form view', async () => {
     api = new Api({
-      baseURL: `http://localhost:8080/`,
+      baseURL: 'http://localhost:8080/',
       headers: {
         'xc-auth': context.token,
       },
@@ -501,3 +502,922 @@ test.describe('Form view', () => {
     });
   });
 });
+
+test.describe('Form view: field validation', () => {
+  if (enableQuickRun() || !isEE()) test.skip();
+
+  let dashboard: DashboardPage;
+  let form: FormPage;
+  let context: any;
+  let api: Api<any>;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page, isEmptyProject: true });
+    dashboard = new DashboardPage(page, context.base);
+    form = dashboard.form;
+  });
+
+  test.afterEach(async () => {
+    await unsetup(context);
+  });
+
+  async function createTable({ tableName, type }: { tableName: string; type?: 'limitToRange' | 'attachment' }) {
+    api = new Api({
+      baseURL: 'http://localhost:8080/',
+      headers: {
+        'xc-auth': context.token,
+      },
+    });
+
+    const columns = [
+      {
+        column_name: 'Id',
+        title: 'Id',
+        uidt: UITypes.ID,
+      },
+      ...(type === 'limitToRange'
+        ? [
+            {
+              column_name: 'Date',
+              title: 'Date',
+              uidt: 'Date',
+              meta: {
+                date_format: 'YYYY-MM-DD',
+              },
+            },
+            {
+              column_name: 'Time',
+              title: 'Time',
+              uidt: 'Time',
+            },
+            {
+              column_name: 'Year',
+              title: 'Year',
+              uidt: 'Year',
+            },
+            {
+              column_name: 'SingleSelect',
+              title: 'SingleSelect',
+              uidt: 'SingleSelect',
+              dtxp: "'jan','feb', 'mar','apr', 'may','jun','jul','aug','sep','oct','nov','dec'",
+            },
+            {
+              column_name: 'MultiSelect',
+              title: 'MultiSelect',
+              uidt: 'MultiSelect',
+              dtxp: "'jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec'",
+            },
+            {
+              column_name: 'Number',
+              title: 'Number',
+              uidt: 'Number',
+            },
+            {
+              column_name: 'Decimal',
+              title: 'Decimal',
+              uidt: 'Decimal',
+            },
+            {
+              column_name: 'Currency',
+              title: 'Currency',
+              uidt: 'Currency',
+              meta: {
+                currency_locale: 'en-GB',
+                currency_code: 'UGX',
+              },
+            },
+            {
+              column_name: 'Percent',
+              title: 'Percent',
+              uidt: 'Percent',
+            },
+            {
+              column_name: 'Duration',
+              title: 'Duration',
+              uidt: 'Duration',
+              meta: {
+                duration: 0,
+              },
+            },
+          ]
+        : type === 'attachment'
+        ? [
+            {
+              column_name: 'Attachment',
+              title: 'Attachment',
+              uidt: UITypes.Attachment,
+            },
+          ]
+        : [
+            {
+              column_name: 'SingleLineText',
+              title: 'SingleLineText',
+              uidt: UITypes.SingleLineText,
+            },
+            {
+              column_name: 'LongText',
+              title: 'LongText',
+              uidt: UITypes.LongText,
+            },
+            {
+              column_name: 'Email',
+              title: 'Email',
+              uidt: UITypes.Email,
+            },
+            {
+              column_name: 'PhoneNumber',
+              title: 'PhoneNumber',
+              uidt: UITypes.PhoneNumber,
+              meta: {
+                validate: true,
+              },
+            },
+            {
+              column_name: 'Url',
+              title: 'Url',
+              uidt: UITypes.URL,
+            },
+          ]),
+    ];
+
+    const base = await api.base.read(context.base.id);
+    await api.source.tableCreate(context.base.id, base.sources?.[0].id, {
+      table_name: tableName,
+      title: tableName,
+      columns: columns,
+    });
+
+    await dashboard.rootPage.reload();
+    await dashboard.rootPage.waitForTimeout(100);
+
+    await dashboard.treeView.openTable({ title: tableName });
+
+    await dashboard.rootPage.waitForTimeout(500);
+
+    await dashboard.viewSidebar.createFormView({ title: 'NewForm' });
+  }
+
+  test('Form builder field validation', async () => {
+    await createTable({ tableName: 'FormFieldValidation' });
+
+    const url = dashboard.rootPage.url();
+
+    await form.configureHeader({
+      title: 'Form validation',
+      subtitle: 'Test form field validation',
+    });
+    await form.verifyHeader({
+      title: 'Form validation',
+      subtitle: 'Test form field validation',
+    });
+
+    // 1.
+    await form.selectVisibleField({ title: 'SingleLineText' });
+
+    await form.addCustomValidation({ type: StringValidationType.MinLength, value: '2', index: 0 });
+    await form.addCustomValidation({ type: StringValidationType.MaxLength, value: '4', index: 1 });
+
+    // Verify already used selector is disable
+    await form.verifyCustomValidationSelector({ type: StringValidationType.MinLength, index: 1 });
+
+    // verify count
+    await form.verifyCustomValidationCount({ count: 2 });
+    // remove validation item
+    await form.removeCustomValidationItem({ index: 1 });
+
+    await form.verifyCustomValidationCount({ count: 1 });
+
+    await form.addCustomValidation({ type: StringValidationType.MaxLength, value: '4', index: 1 });
+
+    await form.verifyCustomValidationCount({ count: 2 });
+    // verify incomplete validator
+    await form.updateCustomValidation({ value: '', index: 1 });
+    await form.verifyCustomValidationCount({ count: 1 });
+    await form.verifyCustomValidationValue({ hasError: true, index: 1 });
+
+    await form.updateCustomValidation({ value: '1', index: 1 });
+
+    // Max value should be greater than min value
+    await form.verifyCustomValidationValue({ hasError: true, index: 1 });
+
+    await form.updateCustomValidation({ value: '15', index: 1 });
+
+    await form.addCustomValidation({
+      type: StringValidationType.StartsWith,
+      value: 'Lorem Ipsum is simply dummy text',
+      index: 2,
+    });
+
+    // max value is set to 12 charactors and startsWidth, endsWith, includes, notIncludes value must not be greater than maxLength
+    await form.verifyCustomValidationValue({ hasError: true, index: 2 });
+    await form.updateCustomValidation({ value: 'lorem', index: 2 });
+
+    await form.addCustomValidation({ type: StringValidationType.EndsWith, value: 'ipsum', index: 3 });
+
+    await form.addCustomValidation({ type: StringValidationType.Includes, value: 'lorem', index: 4 });
+    await form.addCustomValidation({ type: StringValidationType.NotIncludes, value: 'lorem', index: 5 });
+
+    // Includes and not includes value should be different
+    await form.verifyCustomValidationValue({ hasError: true, index: 5 });
+    await form.updateCustomValidation({ value: 'singleLineText', index: 5 });
+
+    // 2. Long text
+    await form.selectVisibleField({ title: 'LongText' });
+    // Regex
+    await form.addCustomValidation({ type: StringValidationType.Regex, value: '(ipsumf', index: 0 });
+
+    // verify invalid regex: `(` is invalid charactor
+    await form.verifyCustomValidationValue({ hasError: true, index: 0 });
+    await form.updateCustomValidation({ value: 'ipsum', index: 0 });
+    await form.verifyCustomValidationValue({ hasError: false, index: 0 });
+
+    // 3. Email
+    await form.selectVisibleField({ title: 'Email' });
+    const { click, verify } = await form.getFormFieldsEmailPhoneUrlValidatorConfig({
+      type: UITypes.Email,
+    });
+
+    const { click: _clickWorkEmail, verify: verifyWorkEmail } = await form.getFormFieldsValidateWorkEmailConfig();
+
+    // Work email validate switch is only visible if email valiator is enabled
+    await verifyWorkEmail({ isVisible: false });
+    await click({ enable: true });
+    await verifyWorkEmail({ isVisible: true });
+
+    await dashboard.rootPage.reload();
+    await form.selectVisibleField({ title: 'Email' });
+
+    await verify({ isEnabled: true });
+
+    // Verify regular email
+    await form.fillForm([{ field: 'Email', value: 'john@gmail.com' }]);
+    const emailErrorConfig = await form.getFormFieldErrors({ title: 'Email' });
+    await emailErrorConfig.verify({ hasError: false });
+
+    await form.fillForm([{ field: 'Email', value: 'john@gmail.com.' }]);
+    await emailErrorConfig.verify({ hasErrorMsg: /Invalid Email/i });
+
+    // Enable accept only work email & verify
+    await _clickWorkEmail({ enable: true });
+    await form.fillForm([{ field: 'Email', value: 'john@gmail.com' }]);
+
+    await emailErrorConfig.verify({ hasErrorMsg: /Invalid Work Email/i });
+    await form.fillForm([{ field: 'Email', value: 'john@nocodb.com' }]);
+    await emailErrorConfig.verify({ hasError: false });
+
+    // 4. Phone Number
+    await form.selectVisibleField({ title: 'PhoneNumber' });
+    const { verify: verifyPhoneNumber } = await form.getFormFieldsEmailPhoneUrlValidatorConfig({
+      type: UITypes.PhoneNumber,
+    });
+
+    // Validation infored by field schema settings
+    await verifyPhoneNumber({ isEnabled: true, isDisabled: true });
+    await form.addCustomValidation({ type: StringValidationType.MinLength, value: '10', index: 0 });
+
+    // 4. URL
+    await form.selectVisibleField({ title: 'Url' });
+
+    // Validation infored by field schema settings
+    await form.addCustomValidation({ type: StringValidationType.StartsWith, value: 'https://', index: 0 });
+
+    const validatorFillDetails = {
+      SingleLineText: [
+        {
+          type: UITypes.SingleLineText,
+          fillValue: 's',
+          errors: [
+            /The input must be at least 2 characters long/i,
+            /The input must start with 'lorem'/i,
+            /The input must end with 'ipsum'./i,
+            /The input must contain the string 'lorem'./i,
+          ],
+        },
+        {
+          type: UITypes.SingleLineText,
+          fillValue: 'lorem',
+          errors: [/The input must end with 'ipsum'./i],
+        },
+        {
+          type: UITypes.SingleLineText,
+          fillValue: 'lorem ipsum x',
+          errors: [/The input must end with 'ipsum'./i],
+        },
+        {
+          type: UITypes.SingleLineText,
+          fillValue: 'lorem ipsum',
+          errors: [],
+        },
+        {
+          type: UITypes.SingleLineText,
+          fillValue: 'lorem ipsum ipsum ipsum',
+          errors: [/The input must not exceed 15 characters/i],
+        },
+        {
+          type: UITypes.SingleLineText,
+          fillValue: 'lorem ipsum',
+          errors: [],
+        },
+      ],
+      LongText: [
+        {
+          type: UITypes.LongText,
+          fillValue: 'lorem',
+          errors: [/The input does not match the required format/i],
+        },
+        {
+          type: UITypes.LongText,
+          fillValue: 'ipsum',
+          errors: [],
+        },
+      ],
+      Email: [
+        {
+          type: UITypes.Email,
+          fillValue: 'john@gmail.com',
+          errors: [/Invalid Work Email/i],
+        },
+        {
+          type: UITypes.Email,
+          fillValue: 'john@gmail.com.',
+          errors: [/Invalid Email/i, /Invalid Work Email/i],
+        },
+        {
+          type: UITypes.Email,
+          fillValue: 'john@nocodb.com',
+          errors: [],
+        },
+      ],
+      PhoneNumber: [
+        {
+          type: UITypes.PhoneNumber,
+          fillValue: '12345',
+          errors: [/Invalid phone number/i, /The input must be at least 10 characters long/i],
+        },
+        {
+          type: UITypes.PhoneNumber,
+          fillValue: '1234567890',
+          errors: [],
+        },
+      ],
+      Url: [
+        {
+          type: UITypes.URL,
+          fillValue: 'google.com',
+          errors: [/The input must start with 'https:\/\/'/i],
+        },
+        {
+          type: UITypes.URL,
+          fillValue: 'https://google.com',
+          errors: [],
+        },
+      ],
+    };
+
+    for (const formField in validatorFillDetails) {
+      const fielConfigError = await form.getFormFieldErrors({ title: formField });
+
+      for (const fieldValue of validatorFillDetails[formField]) {
+        await form.fillForm([{ field: formField, value: fieldValue.fillValue, type: fieldValue.type }]);
+        await fielConfigError.verify({ hasError: !!fieldValue.errors.length });
+        for (const error of fieldValue.errors) {
+          await fielConfigError.verify({ hasErrorMsg: error });
+        }
+      }
+    }
+
+    await form.submitForm();
+    await form.verifyStatePostSubmit({
+      message: 'Successfully submitted form data',
+    });
+
+    await dashboard.rootPage.reload();
+
+    const formLink = await dashboard.form.topbar.getSharedViewUrl();
+
+    await dashboard.rootPage.goto(formLink);
+    // fix me! kludge@hub; page wasn't getting loaded from previous step
+    await dashboard.rootPage.reload();
+
+    const sharedForm = new SharedFormPage(dashboard.rootPage);
+
+    for (const formField in validatorFillDetails) {
+      const fielConfigError = await sharedForm.getFormFieldErrors({ title: formField });
+
+      for (const fieldValue of validatorFillDetails[formField]) {
+        await sharedForm.cell.fillText({
+          columnHeader: formField,
+          text: fieldValue.fillValue,
+          type: fieldValue.type,
+        });
+        await fielConfigError.verify({ hasError: !!fieldValue.errors.length });
+        for (const error of fieldValue.errors) {
+          await fielConfigError.verify({ hasErrorMsg: error });
+        }
+      }
+    }
+
+    await sharedForm.submit();
+    await sharedForm.verifySuccessMessage();
+
+    await dashboard.rootPage.goto(url);
+    // kludge- reload
+    await dashboard.rootPage.reload();
+
+    await dashboard.form.topbar.clickShare();
+    await dashboard.form.topbar.share.clickShareViewPublicAccess();
+    await dashboard.form.topbar.share.closeModal();
+
+    const surveyLink = await dashboard.form.topbar.getSharedViewUrl(true);
+    await dashboard.rootPage.reload();
+    await dashboard.form.configureSubmitMessage({
+      message: 'Thank you for submitting the form',
+    });
+
+    await dashboard.rootPage.goto(surveyLink);
+    // fix me! kludge@hub; page wasn't getting loaded from previous step
+    await dashboard.rootPage.reload();
+    await dashboard.rootPage.waitForTimeout(2000);
+
+    const surveyForm = new SurveyFormPage(dashboard.rootPage);
+
+    await surveyForm.clickFillForm();
+
+    for (const formField in validatorFillDetails) {
+      const fielConfigError = await surveyForm.getFormFieldErrors();
+
+      for (const fieldValue of validatorFillDetails[formField]) {
+        await surveyForm.fill({
+          fieldLabel: formField,
+          value: fieldValue.fillValue,
+          type: fieldValue.type,
+          skipNavigation: true,
+        });
+        await fielConfigError.verify({ hasError: !!fieldValue.errors.length });
+        for (const error of fieldValue.errors) {
+          await fielConfigError.verify({ hasErrorMsg: error });
+        }
+      }
+      if (formField !== 'Url') {
+        await surveyForm.nextButton.click();
+      }
+    }
+
+    await surveyForm.confirmAndSubmit();
+
+    // validate post submit data
+    await surveyForm.validateSuccessMessage({
+      message: 'Thank you for submitting the form',
+    });
+  });
+
+  test('Form builder field validation: limit to range', async () => {
+    await createTable({ tableName: 'FormFieldLimitToRange', type: 'limitToRange' });
+    const url = dashboard.rootPage.url();
+
+    await form.configureHeader({
+      title: 'Limit to range validation',
+      subtitle: 'Test form field validation',
+    });
+    await form.verifyHeader({
+      title: 'Limit to range validation',
+      subtitle: 'Test form field validation',
+    });
+
+    const limitToRageData = [
+      {
+        type: UITypes.Date,
+        title: 'Date',
+        min: '2023-07-17',
+        max: '2025-07-17',
+      },
+      {
+        type: UITypes.Time,
+        title: 'Time',
+        min: '01:20',
+        max: '12:30',
+      },
+      {
+        type: UITypes.Year,
+        title: 'Year',
+        min: '2000',
+        max: '2024',
+      },
+      {
+        type: UITypes.MultiSelect,
+        title: 'MultiSelect',
+        min: '2',
+        max: '3',
+      },
+      {
+        type: UITypes.Number,
+        title: 'Number',
+        min: '1',
+        max: '6',
+      },
+      {
+        type: UITypes.Decimal,
+        title: 'Decimal',
+        min: '1.5',
+        max: '10.58',
+      },
+      {
+        type: UITypes.Currency,
+        title: 'Currency',
+        min: '100',
+        max: '200',
+      },
+      {
+        type: UITypes.Percent,
+        title: 'Percent',
+        uidt: 'Percent',
+        min: '99',
+        max: '120',
+      },
+      {
+        type: UITypes.Duration,
+        title: 'Duration',
+        min: '1:5',
+        max: '10:58',
+      },
+    ];
+
+    for (const limit of limitToRageData) {
+      await form.selectVisibleField({ title: limit.title });
+      const validateRange = await form.getFormFieldsValidateLimitToRange({ type: limit.type as UITypes });
+      await validateRange.click({ enable: true, min: limit.min, max: limit.max });
+    }
+
+    const limitToRageFillValue = {
+      Date: [
+        {
+          type: UITypes.Date,
+          fillValue: '2023-07-12',
+          errors: [/Select a date on or after 2023-07-17/i],
+        },
+        {
+          type: UITypes.Date,
+          fillValue: '2026-07-17',
+          errors: [/Select a date on or before 2025-07-17/i],
+        },
+        {
+          type: UITypes.Date,
+          fillValue: '2024-07-17',
+          errors: [],
+        },
+      ],
+      Time: [
+        {
+          type: UITypes.Time,
+          fillValue: '01:10',
+          errors: [/Input a time equal to or later than 01:20/i],
+        },
+        {
+          type: UITypes.Time,
+          fillValue: '14:30',
+          errors: [/Input a time equal to or earlier than 12:30/i],
+        },
+        {
+          type: UITypes.Time,
+          fillValue: '12:30',
+          errors: [],
+        },
+      ],
+      Year: [
+        {
+          type: UITypes.Year,
+          fillValue: '1999',
+          errors: [/Input a year equal to or later than 2000/i],
+        },
+        {
+          type: UITypes.Year,
+          fillValue: '2025',
+          errors: [/Input a year equal to or earlier than 2024/i],
+        },
+        {
+          type: UITypes.Year,
+          fillValue: '2000',
+          errors: [],
+        },
+      ],
+      Number: [
+        {
+          type: UITypes.Number,
+          fillValue: '0',
+          errors: [/Input a number equal to or greater than 1/i],
+        },
+        {
+          type: UITypes.Number,
+          fillValue: '7',
+          errors: [/Input a number equal to or less than 6/i],
+        },
+        {
+          type: UITypes.Number,
+          fillValue: '6',
+          errors: [],
+        },
+      ],
+      Decimal: [
+        {
+          type: UITypes.Decimal,
+          fillValue: '1.00',
+          errors: [/Input a number equal to or greater than 1.5/i],
+        },
+        {
+          type: UITypes.Decimal,
+          fillValue: '11.29',
+          errors: [/Input a number equal to or less than 10.58/i],
+        },
+        {
+          type: UITypes.Decimal,
+          fillValue: '10.2',
+          errors: [],
+        },
+      ],
+      Currency: [
+        {
+          type: UITypes.Currency,
+          fillValue: '88',
+          errors: [/Input a number equal to or greater than 100/i],
+        },
+        {
+          type: UITypes.Currency,
+          fillValue: '2012',
+          errors: [/Input a number equal to or less than 200/i],
+        },
+        {
+          type: UITypes.Currency,
+          fillValue: '150',
+          errors: [],
+        },
+      ],
+      Percent: [
+        {
+          type: UITypes.Percent,
+          fillValue: '88',
+          errors: [/Input a number equal to or greater than 99/i],
+        },
+        {
+          type: UITypes.Percent,
+          fillValue: '2012',
+          errors: [/Input a number equal to or less than 120/i],
+        },
+        {
+          type: UITypes.Percent,
+          fillValue: '110',
+          errors: [],
+        },
+      ],
+      Duration: [
+        {
+          type: UITypes.Duration,
+          fillValue: '1:00',
+          errors: [/Input a duration equal to or later than 01:05/i],
+        },
+        {
+          type: UITypes.Duration,
+          fillValue: '11:29',
+          errors: [/Input a duration equal to or earlier than 10:58/i],
+        },
+        {
+          type: UITypes.Duration,
+          fillValue: '10:2',
+          errors: [],
+        },
+      ],
+    };
+
+    for (const formField in limitToRageFillValue) {
+      const fielConfigError = await form.getFormFieldErrors({ title: formField });
+
+      for (const fieldValue of limitToRageFillValue[formField]) {
+        await form.fillForm([{ field: formField, value: fieldValue.fillValue, type: fieldValue.type }]);
+
+        await fielConfigError.verify({ hasError: !!fieldValue.errors.length });
+        for (const error of fieldValue.errors) {
+          await fielConfigError.verify({ hasErrorMsg: error });
+        }
+      }
+    }
+
+    await form.submitForm();
+    await form.verifyStatePostSubmit({
+      message: 'Successfully submitted form data',
+    });
+
+    await dashboard.rootPage.reload();
+
+    const formLink = await dashboard.form.topbar.getSharedViewUrl();
+
+    await dashboard.rootPage.goto(formLink);
+    // fix me! kludge@hub; page wasn't getting loaded from previous step
+    await dashboard.rootPage.reload();
+
+    const sharedForm = new SharedFormPage(dashboard.rootPage);
+
+    for (const formField in limitToRageFillValue) {
+      const fielConfigError = await sharedForm.getFormFieldErrors({ title: formField });
+
+      for (const fieldValue of limitToRageFillValue[formField]) {
+        await sharedForm.cell.fillText({
+          columnHeader: formField,
+          text: fieldValue.fillValue,
+          type: fieldValue.type,
+        });
+        await sharedForm.fieldLabel({ title: formField }).click();
+
+        await dashboard.rootPage.waitForTimeout(100);
+
+        await fielConfigError.verify({ hasError: !!fieldValue.errors.length });
+        for (const error of fieldValue.errors) {
+          await fielConfigError.verify({ hasErrorMsg: error });
+        }
+      }
+    }
+
+    const multiSelectFieldError = await sharedForm.getFormFieldErrors({ title: 'MultiSelect' });
+
+    // Click on multi select options
+    const multiSelectParams = {
+      index: -1,
+      columnHeader: 'MultiSelect',
+      option: 'jan',
+      multiSelect: true,
+      ignoreDblClick: true,
+    };
+    await sharedForm.cell.selectOption.select({ ...multiSelectParams, option: 'jan' });
+
+    await multiSelectFieldError.verify({ hasErrorMsg: /Please select at least 2 options/ });
+
+    await sharedForm.cell.selectOption.select({ ...multiSelectParams, option: 'feb' });
+    await sharedForm.cell.selectOption.select({ ...multiSelectParams, option: 'mar' });
+    await multiSelectFieldError.verify({ hasError: false });
+
+    await sharedForm.submit();
+    await sharedForm.verifySuccessMessage();
+
+    await dashboard.rootPage.goto(url);
+    // kludge- reload
+    await dashboard.rootPage.reload();
+
+    await dashboard.form.topbar.clickShare();
+    await dashboard.form.topbar.share.clickShareViewPublicAccess();
+    await dashboard.form.topbar.share.closeModal();
+
+    const surveyLink = await dashboard.form.topbar.getSharedViewUrl(true);
+    await dashboard.rootPage.reload();
+    await dashboard.form.configureSubmitMessage({
+      message: 'Thank you for submitting the form',
+    });
+
+    await form.removeField({ field: 'SingleSelect', mode: 'hideField' });
+    await form.removeField({ field: 'MultiSelect', mode: 'hideField' });
+
+    await dashboard.rootPage.goto(surveyLink);
+    // fix me! kludge@hub; page wasn't getting loaded from previous step
+    await dashboard.rootPage.reload();
+    await dashboard.rootPage.waitForTimeout(2000);
+
+    const surveyForm = new SurveyFormPage(dashboard.rootPage);
+
+    await surveyForm.clickFillForm();
+
+    for (const formField in limitToRageFillValue) {
+      const fielConfigError = await surveyForm.getFormFieldErrors();
+      for (const fieldValue of limitToRageFillValue[formField]) {
+        await surveyForm.fill({
+          fieldLabel: formField,
+          value: fieldValue.fillValue,
+          type: fieldValue.type,
+          skipNavigation: true,
+        });
+        await fielConfigError.verify({ hasError: !!fieldValue.errors.length });
+        for (const error of fieldValue.errors) {
+          await fielConfigError.verify({ hasErrorMsg: error });
+        }
+      }
+      if (formField !== 'Duration') {
+        await surveyForm.nextButton.click();
+      }
+    }
+
+    await surveyForm.confirmAndSubmit();
+
+    // validate post submit data
+    await surveyForm.validateSuccessMessage({
+      message: 'Thank you for submitting the form',
+    });
+  });
+
+  test('Form builder field validation: attachment', async () => {
+    await createTable({ tableName: 'FormFieldAttachment', type: 'attachment' });
+
+    const url = dashboard.rootPage.url();
+
+    await form.configureHeader({
+      title: 'Attachment validation',
+      subtitle: 'Test form field validation',
+    });
+    await form.verifyHeader({
+      title: 'Attachment validation',
+      subtitle: 'Test form field validation',
+    });
+
+    await form.selectVisibleField({ title: 'Attachment' });
+
+    const validateAttType = await form.getFormFieldsValidateAttFileType();
+    await validateAttType.click({ enable: true, fillValue: '.jpg' });
+    await validateAttType.verify({ hasError: true });
+    await validateAttType.click({ enable: true, fillValue: 'image/png' });
+    await validateAttType.verify({ hasError: false });
+
+    const validateAttCount = await form.getFormFieldsValidateAttFileCount();
+    await validateAttCount.click({ enable: true, fillValue: '1a' });
+    await validateAttCount.verify({ hasError: true });
+    await validateAttCount.click({ enable: true, fillValue: '1' });
+    await validateAttCount.verify({ hasError: false });
+
+    const validateAttSize = await form.getFormFieldsValidateAttFileSize();
+    await validateAttSize.click({ enable: true, fillValue: '2000', unit: 'KB' });
+
+    const formLink = await dashboard.form.topbar.getSharedViewUrl();
+
+    await dashboard.rootPage.goto(formLink);
+    // fix me! kludge@hub; page wasn't getting loaded from previous step
+    await dashboard.rootPage.reload();
+
+    const sharedForm = new SharedFormPage(dashboard.rootPage);
+    await sharedForm.cell.attachment.addFile({
+      columnHeader: 'Attachment',
+      filePath: [`${process.cwd()}/fixtures/sampleFiles/sampleImage.jpeg`],
+    });
+
+    const attError = await sharedForm.getFormFieldErrors({ title: 'Attachment' });
+    await attError.verify({ hasErrorMsg: /Only following file types allowed to upload 'image\/png'/ });
+    await attError.verify({ hasErrorMsg: /The file size must not exceed 2000 KB/ });
+
+    await sharedForm.cell.attachment.removeFile({
+      columnHeader: 'Attachment',
+      attIndex: 0,
+    });
+
+    await sharedForm.cell.attachment.addFile({
+      columnHeader: 'Attachment',
+      filePath: [`${process.cwd()}/fixtures/sampleFiles/Image/2.png`],
+    });
+    await attError.verify({ hasError: false });
+
+    await sharedForm.submit();
+    await sharedForm.verifySuccessMessage();
+
+    await dashboard.rootPage.goto(url);
+    // kludge- reload
+    await dashboard.rootPage.reload();
+
+    await dashboard.form.topbar.clickShare();
+    await dashboard.form.topbar.share.clickShareViewPublicAccess();
+    await dashboard.form.topbar.share.closeModal();
+
+    const surveyLink = await dashboard.form.topbar.getSharedViewUrl(true);
+    await dashboard.rootPage.waitForTimeout(2000);
+    await dashboard.form.configureSubmitMessage({
+      message: 'Thank you for submitting the form',
+    });
+
+    await dashboard.rootPage.goto(surveyLink);
+    // fix me! kludge@hub; page wasn't getting loaded from previous step
+    await dashboard.rootPage.reload();
+    await dashboard.rootPage.waitForTimeout(2000);
+
+    const surveyForm = new SurveyFormPage(dashboard.rootPage);
+
+    await surveyForm.clickFillForm();
+
+    await surveyForm.cell.attachment.addFile({
+      columnHeader: 'Attachment',
+      filePath: [`${process.cwd()}/fixtures/sampleFiles/sampleImage.jpeg`],
+    });
+
+    const surveryAttError = await surveyForm.getFormFieldErrors();
+    await surveryAttError.verify({ hasErrorMsg: /Only following file types allowed to upload 'image\/png'/ });
+    await surveryAttError.verify({ hasErrorMsg: /The file size must not exceed 2000 KB/ });
+
+    await surveyForm.cell.attachment.removeFile({
+      columnHeader: 'Attachment',
+      attIndex: 0,
+    });
+
+    await surveyForm.cell.attachment.addFile({
+      columnHeader: 'Attachment',
+      filePath: [`${process.cwd()}/fixtures/sampleFiles/Image/2.png`],
+    });
+    await surveryAttError.verify({ hasError: false });
+
+    await surveyForm.confirmAndSubmit();
+
+    // validate post submit data
+    await surveyForm.validateSuccessMessage({
+      message: 'Thank you for submitting the form',
+    });
+  });
+});