From e17db2526778171254547e81098f5dc73c339b9a Mon Sep 17 00:00:00 2001
From: Illia Rudniev <cheskmr@gmail.com>
Date: Tue, 4 Feb 2025 13:11:19 +0200
Subject: [PATCH] Illiar/fix/v2 bugfixes (#3016)

* fix: fixed bug when context from tasks didnt get to submit

* feat: reworked validation logic

* fix: fixed focus on inputs & fixed abortEarlyOnFirstError

* fix: adjusted validation params
---
 .../CollectionFlowUI/CollectionFlowUI.tsx     |  10 +-
 .../inputs/DropdownInput/DropdownInput.tsx    |  13 +-
 .../inputs/MultiSelect/MultiSelect.tsx        |  17 +-
 .../Form/DynamicForm/DynamicForm.tsx          |   4 +-
 .../DynamicForm/DynamicForm.unit.test.tsx     |   6 +-
 .../InputsShowcase/InputsShowcase.tsx         |  25 +-
 .../ValidationShowcase/ValidationShowcase.tsx |   3 +-
 .../context/dynamic-form.context.ts           |   4 +-
 .../Form/DynamicForm/context/types.ts         |   2 +-
 .../controls/SubmitButton/SubmitButton.tsx    |  17 +-
 .../SubmitButton/SubmitButton.unit.test.tsx   |   6 +-
 .../fields/DocumentField/DocumentField.tsx    |  13 +-
 .../fields/FieldList/FieldList.tsx            |  15 +-
 .../fields/FileField/FileField.tsx            |  13 +-
 .../hooks/external/useField/useField.ts       |  13 +-
 .../external/useField/useField.unit.test.ts   |  10 +-
 .../hooks/external/useSubmit/useSubmit.ts     |  15 +-
 .../external/useSubmit/useSubmit.unit.test.ts |   5 +-
 .../Form/Validator/ValidatorProvider.tsx      |  10 +-
 .../organisms/Form/Validator/context/types.ts |   2 +-
 .../internal/useValidate/useAsyncValidate.ts  |  46 --
 .../useValidate/useAsyncValidate.unit.test.ts | 121 ----
 .../internal/useValidate/useManualValidate.ts |  24 -
 .../useManualValidate.unit.test.ts            | 103 ---
 .../internal/useValidate/useSyncValidate.ts   |  23 -
 .../useValidate/useSyncValidate.unit.test.ts  | 108 ----
 .../hooks/internal/useValidate/useValidate.ts |  89 ++-
 .../useValidate/useValidate.unit.test.ts      | 606 ++++--------------
 .../organisms/Form/Validator/types/index.ts   |   4 +
 .../Validator/utils/validate/exceptions.ts    |   5 +
 .../Form/Validator/utils/validate/types.ts    |   1 +
 .../Form/Validator/utils/validate/validate.ts |  68 +-
 .../utils/validate/validate.unit.test.ts      |  95 ++-
 .../useRuleEngine/useRuleEngine.unit.test.ts  |   2 +-
 34 files changed, 454 insertions(+), 1044 deletions(-)
 delete mode 100644 packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useAsyncValidate.ts
 delete mode 100644 packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useAsyncValidate.unit.test.ts
 delete mode 100644 packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useManualValidate.ts
 delete mode 100644 packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useManualValidate.unit.test.ts
 delete mode 100644 packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useSyncValidate.ts
 delete mode 100644 packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useSyncValidate.unit.test.ts
 create mode 100644 packages/ui/src/components/organisms/Form/Validator/utils/validate/exceptions.ts

diff --git a/apps/kyb-app/src/pages/CollectionFlow/versions/v2/components/organisms/CollectionFlowUI/CollectionFlowUI.tsx b/apps/kyb-app/src/pages/CollectionFlow/versions/v2/components/organisms/CollectionFlowUI/CollectionFlowUI.tsx
index 48b29d91b7..d86aaa1857 100644
--- a/apps/kyb-app/src/pages/CollectionFlow/versions/v2/components/organisms/CollectionFlowUI/CollectionFlowUI.tsx
+++ b/apps/kyb-app/src/pages/CollectionFlow/versions/v2/components/organisms/CollectionFlowUI/CollectionFlowUI.tsx
@@ -3,7 +3,7 @@ import './validator';
 import { useDynamicUIContext } from '@/components/organisms/DynamicUI/hooks/useDynamicUIContext';
 import { useStateManagerContext } from '@/components/organisms/DynamicUI/StateManager/components/StateProvider/hooks/useStateManagerContext';
 import { CollectionFlowContext } from '@/domains/collection-flow/types/flow-context.types';
-import { DynamicFormV2, IFormElement, IFormRef } from '@ballerine/ui';
+import { DynamicFormV2, IDynamicFormValidationParams, IFormElement, IFormRef } from '@ballerine/ui';
 import { FunctionComponent, useCallback, useMemo, useRef } from 'react';
 import { usePluginsSubscribe } from './components/utility/PluginsRunner';
 import { usePlugins } from './components/utility/PluginsRunner/hooks/external/usePlugins';
@@ -20,10 +20,12 @@ interface ICollectionFlowUIProps<TValues = CollectionFlowContext> {
   isRevision?: boolean;
 }
 
-const validationParams = {
-  validateOnBlur: false,
+const validationParams: IDynamicFormValidationParams = {
+  validateOnChange: true,
+  validateOnBlur: true,
   abortEarly: false,
-  validationDelay: 500,
+  abortAfterFirstError: true,
+  validationDelay: 300,
 };
 
 export const CollectionFlowUI: FunctionComponent<ICollectionFlowUIProps> = ({
diff --git a/packages/ui/src/components/molecules/inputs/DropdownInput/DropdownInput.tsx b/packages/ui/src/components/molecules/inputs/DropdownInput/DropdownInput.tsx
index 149f7ff6a4..83cd22b728 100644
--- a/packages/ui/src/components/molecules/inputs/DropdownInput/DropdownInput.tsx
+++ b/packages/ui/src/components/molecules/inputs/DropdownInput/DropdownInput.tsx
@@ -1,7 +1,14 @@
 import { CaretSortIcon } from '@radix-ui/react-icons';
 import clsx from 'clsx';
 import { CheckIcon } from 'lucide-react';
-import React, { FocusEvent, FunctionComponent, useCallback, useMemo, useState } from 'react';
+import React, {
+  FocusEvent,
+  FocusEventHandler,
+  FunctionComponent,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
 
 import { ctw } from '@/common';
 import {
@@ -101,6 +108,9 @@ export const DropdownInput: FunctionComponent<DropdownInputProps> = ({
             props?.trigger?.className,
           )}
           disabled={disabled}
+          tabIndex={0}
+          onFocus={onFocus as FocusEventHandler<HTMLButtonElement>}
+          onBlur={onBlur as FocusEventHandler<HTMLButtonElement>}
           data-testid={testId ? `${testId}-trigger` : undefined}
         >
           <span className="flex-1 truncate text-left">
@@ -114,7 +124,6 @@ export const DropdownInput: FunctionComponent<DropdownInputProps> = ({
         align={props?.content?.align || 'center'}
         style={{ width: 'var(--radix-popover-trigger-width)' }}
         className={clsx('p-2', props?.content?.className)}
-        onBlur={onBlur}
       >
         <Command className="w-full">
           {searchable ? (
diff --git a/packages/ui/src/components/molecules/inputs/MultiSelect/MultiSelect.tsx b/packages/ui/src/components/molecules/inputs/MultiSelect/MultiSelect.tsx
index 328a446119..fb94435316 100644
--- a/packages/ui/src/components/molecules/inputs/MultiSelect/MultiSelect.tsx
+++ b/packages/ui/src/components/molecules/inputs/MultiSelect/MultiSelect.tsx
@@ -5,7 +5,7 @@ import { UnselectButtonProps } from '@/components/molecules/inputs/MultiSelect/c
 import { SelectedElementParams } from '@/components/molecules/inputs/MultiSelect/types';
 import { ClickAwayListener } from '@mui/material';
 import keyBy from 'lodash/keyBy';
-import { FocusEvent, useCallback, useMemo, useRef, useState } from 'react';
+import { FocusEvent, FocusEventHandler, useCallback, useMemo, useRef, useState } from 'react';
 
 export type MultiSelectValue = string | number;
 
@@ -50,7 +50,9 @@ export const MultiSelect = ({
   const [open, setOpen] = useState(false);
 
   const selected = useMemo(() => {
-    if (!value) return [];
+    if (!value) {
+      return [];
+    }
 
     const optionsMap = keyBy(options, 'value');
 
@@ -124,7 +126,9 @@ export const MultiSelect = ({
   }, [options, selected, inputValue]);
 
   const handleOutsidePopupClick = useCallback(() => {
-    if (open) setOpen(false);
+    if (open) {
+      setOpen(false);
+    }
   }, [open]);
 
   const buildUnselectButtonProps = useCallback(
@@ -158,7 +162,12 @@ export const MultiSelect = ({
                 { 'pointer-events-none opacity-50': disabled },
               )}
             >
-              <div className="flex flex-wrap gap-2 px-2">
+              <div
+                className="flex flex-wrap gap-2 px-2"
+                tabIndex={0}
+                onFocus={onFocus as FocusEventHandler<HTMLDivElement>}
+                onBlur={onBlur as FocusEventHandler<HTMLDivElement>}
+              >
                 {selected.map(option => {
                   return renderSelected(
                     {
diff --git a/packages/ui/src/components/organisms/Form/DynamicForm/DynamicForm.tsx b/packages/ui/src/components/organisms/Form/DynamicForm/DynamicForm.tsx
index 39d82345e7..24e7f8445b 100644
--- a/packages/ui/src/components/organisms/Form/DynamicForm/DynamicForm.tsx
+++ b/packages/ui/src/components/organisms/Form/DynamicForm/DynamicForm.tsx
@@ -39,10 +39,10 @@ export const DynamicFormV2 = forwardRef(
     });
     const touchedApi = useTouched(elements, valuesApi.values);
     const fieldHelpers = useFieldHelpers<TValues>({ valuesApi, touchedApi });
-    const { submit } = useSubmit({ values: valuesApi.values, onSubmit });
+    const { submit } = useSubmit<TValues>({ onSubmit });
 
     useImperativeHandle(ref, () => ({
-      submit,
+      submit: () => submit(valuesApi.values),
       validate: () => null,
       setValues: valuesApi.setValues,
       setTouched: touchedApi.setTouched,
diff --git a/packages/ui/src/components/organisms/Form/DynamicForm/DynamicForm.unit.test.tsx b/packages/ui/src/components/organisms/Form/DynamicForm/DynamicForm.unit.test.tsx
index 403bb9a0a6..d73915525f 100644
--- a/packages/ui/src/components/organisms/Form/DynamicForm/DynamicForm.unit.test.tsx
+++ b/packages/ui/src/components/organisms/Form/DynamicForm/DynamicForm.unit.test.tsx
@@ -150,7 +150,6 @@ describe('DynamicFormV2', () => {
   it('should pass correct props to useSubmit', () => {
     render(<DynamicFormV2 {...mockProps} />);
     expect(useSubmit).toHaveBeenCalledWith({
-      values: mockProps.values,
       onSubmit: mockProps.onSubmit,
     });
   });
@@ -278,11 +277,12 @@ describe('DynamicFormV2', () => {
       vi.mocked(useFieldHelpers).mockReturnValue(fieldHelpersMock);
     });
 
-    it('should expose submit method through ref', () => {
+    it('should call submit method through ref', () => {
       const ref = { current: null as IFormRef<any> | null };
       render(<DynamicFormV2 {...mockProps} ref={ref} />);
 
-      expect(ref.current).toHaveProperty('submit', submitMock.submit);
+      ref.current?.submit();
+      expect(submitMock.submit).toHaveBeenCalledWith(valuesMock.values);
     });
 
     it('should expose validate method through ref', () => {
diff --git a/packages/ui/src/components/organisms/Form/DynamicForm/_stories/InputsShowcase/InputsShowcase.tsx b/packages/ui/src/components/organisms/Form/DynamicForm/_stories/InputsShowcase/InputsShowcase.tsx
index 71385c9351..5c1a1c461b 100644
--- a/packages/ui/src/components/organisms/Form/DynamicForm/_stories/InputsShowcase/InputsShowcase.tsx
+++ b/packages/ui/src/components/organisms/Form/DynamicForm/_stories/InputsShowcase/InputsShowcase.tsx
@@ -14,7 +14,15 @@ const schema: Array<IFormElement<any, any>> = [
       placeholder: 'Enter text',
       description: 'This is a text field for entering any text value',
     },
-    validate: [],
+    validate: [
+      { type: 'required', value: {} },
+      {
+        type: 'minLength',
+        value: {
+          minLength: 10,
+        },
+      },
+    ],
   },
   {
     id: 'AutocompleteField',
@@ -30,6 +38,7 @@ const schema: Array<IFormElement<any, any>> = [
         { value: 'option3', label: 'Option 3' },
       ],
     },
+    validate: [{ type: 'required', value: {} }],
   },
   {
     id: 'CheckboxListField',
@@ -44,6 +53,7 @@ const schema: Array<IFormElement<any, any>> = [
         { value: 'option3', label: 'Option 3' },
       ],
     },
+    validate: [{ type: 'required', value: {} }],
   },
   {
     id: 'DateField',
@@ -53,6 +63,7 @@ const schema: Array<IFormElement<any, any>> = [
       label: 'Date Field',
       description: 'Select a date from the calendar',
     },
+    validate: [{ type: 'required', value: {} }],
   },
   {
     id: 'MultiselectField',
@@ -67,6 +78,7 @@ const schema: Array<IFormElement<any, any>> = [
         { value: 'option3', label: 'Option 3' },
       ],
     },
+    validate: [{ type: 'required', value: {} }],
   },
   {
     id: 'SelectField',
@@ -81,6 +93,7 @@ const schema: Array<IFormElement<any, any>> = [
         { value: 'option3', label: 'Option 3' },
       ],
     },
+    validate: [{ type: 'required', value: {} }],
   },
   {
     id: 'CheckboxField',
@@ -90,6 +103,7 @@ const schema: Array<IFormElement<any, any>> = [
       label: 'Checkbox Field',
       description: 'Toggle this checkbox for a yes/no selection',
     },
+    validate: [{ type: 'required', value: {} }],
   },
   {
     id: 'PhoneField',
@@ -100,6 +114,7 @@ const schema: Array<IFormElement<any, any>> = [
       description: 'Enter a phone number with country code selection',
       defaultCountry: 'il',
     },
+    validate: [{ type: 'required', value: {} }],
   },
   {
     id: 'RadioField',
@@ -114,6 +129,7 @@ const schema: Array<IFormElement<any, any>> = [
         { value: 'option3', label: 'Option 3' },
       ],
     },
+    validate: [{ type: 'required', value: {} }],
   },
   {
     id: 'TagsField',
@@ -123,6 +139,7 @@ const schema: Array<IFormElement<any, any>> = [
       label: 'Tags Field',
       description: 'Add multiple tags by typing and pressing enter',
     },
+    validate: [{ type: 'required', value: {} }],
   },
   {
     id: 'FileField',
@@ -133,6 +150,7 @@ const schema: Array<IFormElement<any, any>> = [
       placeholder: 'Select File',
       description: 'Upload a file from your device',
     },
+    validate: [{ type: 'required', value: {} }],
   },
   {
     id: 'DocumentField-1',
@@ -154,6 +172,7 @@ const schema: Array<IFormElement<any, any>> = [
         resultPath: 'filename',
       },
     },
+    validate: [{ type: 'required', value: {} }],
   },
   {
     id: 'DocumentField-2',
@@ -176,6 +195,7 @@ const schema: Array<IFormElement<any, any>> = [
         resultPath: 'filename',
       },
     },
+    validate: [{ type: 'required', value: {} }],
   },
   {
     id: 'FieldList',
@@ -185,6 +205,7 @@ const schema: Array<IFormElement<any, any>> = [
       label: 'Field List',
       description: 'A list of repeatable form fields that can be added or removed',
     },
+    validate: [{ type: 'required', value: {} }],
     children: [
       {
         id: 'Nested-TextField',
@@ -212,6 +233,7 @@ const schema: Array<IFormElement<any, any>> = [
     params: {
       label: 'Submit Button',
     },
+    validate: [{ type: 'required', value: {} }],
   },
 ];
 
@@ -228,6 +250,7 @@ export const InputsShowcaseComponent = () => {
             console.log('onSubmit');
           }}
           onChange={setContext}
+          validationParams={{ abortAfterFirstError: true }}
           // onEvent={console.log}
         />
       </div>
diff --git a/packages/ui/src/components/organisms/Form/DynamicForm/_stories/ValidationShowcase/ValidationShowcase.tsx b/packages/ui/src/components/organisms/Form/DynamicForm/_stories/ValidationShowcase/ValidationShowcase.tsx
index d62e52f60e..94e83e82d0 100644
--- a/packages/ui/src/components/organisms/Form/DynamicForm/_stories/ValidationShowcase/ValidationShowcase.tsx
+++ b/packages/ui/src/components/organisms/Form/DynamicForm/_stories/ValidationShowcase/ValidationShowcase.tsx
@@ -6,7 +6,8 @@ import { IDynamicFormValidationParams } from '../../types';
 import { schema } from './schema';
 
 const validationParams: IDynamicFormValidationParams = {
-  validateOnBlur: false,
+  validateOnBlur: true,
+  validateOnChange: false,
 };
 
 export const ValidationShowcaseComponent = () => {
diff --git a/packages/ui/src/components/organisms/Form/DynamicForm/context/dynamic-form.context.ts b/packages/ui/src/components/organisms/Form/DynamicForm/context/dynamic-form.context.ts
index f5617e6457..f46c7508d5 100644
--- a/packages/ui/src/components/organisms/Form/DynamicForm/context/dynamic-form.context.ts
+++ b/packages/ui/src/components/organisms/Form/DynamicForm/context/dynamic-form.context.ts
@@ -1,4 +1,6 @@
 import { createContext } from 'react';
 import { IDynamicFormContext } from './types';
 
-export const DynamicFormContext = createContext({} as IDynamicFormContext<object>);
+export const DynamicFormContext = createContext<IDynamicFormContext<any>>(
+  {} as IDynamicFormContext<any>,
+);
diff --git a/packages/ui/src/components/organisms/Form/DynamicForm/context/types.ts b/packages/ui/src/components/organisms/Form/DynamicForm/context/types.ts
index 724a930e79..2f1c452f67 100644
--- a/packages/ui/src/components/organisms/Form/DynamicForm/context/types.ts
+++ b/packages/ui/src/components/organisms/Form/DynamicForm/context/types.ts
@@ -17,7 +17,7 @@ export interface IDynamicFormContext<TValues extends object> {
   touched: ITouchedState;
   elementsMap: TElementsMap;
   fieldHelpers: IFieldHelpers;
-  submit: () => void;
+  submit: (values: TValues) => void;
   callbacks: IDynamicFormCallbacks;
   metadata: Record<string, string>;
   validationParams: IDynamicFormValidationParams;
diff --git a/packages/ui/src/components/organisms/Form/DynamicForm/controls/SubmitButton/SubmitButton.tsx b/packages/ui/src/components/organisms/Form/DynamicForm/controls/SubmitButton/SubmitButton.tsx
index a1ee9db4ae..64bd44168a 100644
--- a/packages/ui/src/components/organisms/Form/DynamicForm/controls/SubmitButton/SubmitButton.tsx
+++ b/packages/ui/src/components/organisms/Form/DynamicForm/controls/SubmitButton/SubmitButton.tsx
@@ -21,15 +21,16 @@ export const SubmitButton: TDynamicFormElement<string, ISubmitButtonParams> = ({
   const { fieldHelpers, values, submit } = useDynamicForm();
   const { runTasks, isRunning } = useTaskRunner();
   const { sendEvent } = useEvents(element);
+  const { validate, isValid } = useValidator();
 
   const { touchAllFields } = fieldHelpers;
 
-  const { isValid, errors } = useValidator();
-
   const { disableWhenFormIsInvalid = false, text = 'Submit' } = element.params || {};
 
   const disabled = useMemo(() => {
-    if (disableWhenFormIsInvalid && !isValid) return true;
+    if (disableWhenFormIsInvalid && !isValid) {
+      return true;
+    }
 
     return _disabled;
   }, [disableWhenFormIsInvalid, isValid, _disabled]);
@@ -39,9 +40,12 @@ export const SubmitButton: TDynamicFormElement<string, ISubmitButtonParams> = ({
 
     touchAllFields();
 
+    const validationResult = await validate();
+    const isValid = validationResult?.length === 0;
+
     if (!isValid) {
       console.log(`Submit button clicked but form is invalid`);
-      console.log('Validation errors', errors);
+      console.log('Validation errors', validationResult);
 
       return;
     }
@@ -52,10 +56,9 @@ export const SubmitButton: TDynamicFormElement<string, ISubmitButtonParams> = ({
 
     fieldHelpers.setValues(updatedContext);
 
-    submit();
-
+    submit(updatedContext);
     sendEvent('onSubmit');
-  }, [submit, isValid, touchAllFields, runTasks, sendEvent, errors, onClick, values, fieldHelpers]);
+  }, [submit, touchAllFields, runTasks, sendEvent, onClick, values, fieldHelpers, validate]);
 
   return (
     <Button
diff --git a/packages/ui/src/components/organisms/Form/DynamicForm/controls/SubmitButton/SubmitButton.unit.test.tsx b/packages/ui/src/components/organisms/Form/DynamicForm/controls/SubmitButton/SubmitButton.unit.test.tsx
index 21debe053b..781b08c4fe 100644
--- a/packages/ui/src/components/organisms/Form/DynamicForm/controls/SubmitButton/SubmitButton.unit.test.tsx
+++ b/packages/ui/src/components/organisms/Form/DynamicForm/controls/SubmitButton/SubmitButton.unit.test.tsx
@@ -79,7 +79,7 @@ describe('SubmitButton', () => {
       isValid: true,
       errors: {},
       values: {},
-      validate: vi.fn(),
+      validate: vi.fn().mockResolvedValue([]),
     } as unknown as IValidatorContext<object>);
     vi.mocked(useEvents).mockReturnValue({
       sendEvent: mockSendEvent,
@@ -149,7 +149,7 @@ describe('SubmitButton', () => {
       isValid: true,
       errors: [],
       values: {},
-      validate: vi.fn(),
+      validate: vi.fn().mockResolvedValue([]),
     });
 
     render(<SubmitButton element={mockElement} />);
@@ -244,7 +244,7 @@ describe('SubmitButton', () => {
       isValid: true,
       errors: [],
       values: {},
-      validate: vi.fn(),
+      validate: vi.fn().mockResolvedValue([]),
     } as unknown as IValidatorContext<object>);
 
     render(<SubmitButton element={mockElement} />);
diff --git a/packages/ui/src/components/organisms/Form/DynamicForm/fields/DocumentField/DocumentField.tsx b/packages/ui/src/components/organisms/Form/DynamicForm/fields/DocumentField/DocumentField.tsx
index f06993a440..9cbf13ed31 100644
--- a/packages/ui/src/components/organisms/Form/DynamicForm/fields/DocumentField/DocumentField.tsx
+++ b/packages/ui/src/components/organisms/Form/DynamicForm/fields/DocumentField/DocumentField.tsx
@@ -69,9 +69,13 @@ export const DocumentField: TDynamicFormField<IDocumentFieldParams> = ({ element
   }, [inputRef]);
 
   const file = useMemo(() => {
-    if (value instanceof File) return value;
+    if (value instanceof File) {
+      return value;
+    }
 
-    if (typeof value === 'string') return new File([], value);
+    if (typeof value === 'string') {
+      return new File([], value);
+    }
 
     return undefined;
   }, [value]);
@@ -105,6 +109,9 @@ export const DocumentField: TDynamicFormField<IDocumentFieldParams> = ({ element
         )}
         onClick={focusInputOnContainerClick}
         data-testid={createTestId(element, stack)}
+        tabIndex={0}
+        onFocus={onFocus}
+        onBlur={onBlur}
       >
         <div className="flex gap-3 text-[#007AFF]">
           <Upload />
@@ -133,8 +140,6 @@ export const DocumentField: TDynamicFormField<IDocumentFieldParams> = ({ element
           accept={acceptFileFormats}
           disabled={disabled || disabledWhileUploading}
           onChange={handleChange}
-          onBlur={onBlur}
-          onFocus={onFocus}
           ref={inputRef}
           className="hidden"
         />
diff --git a/packages/ui/src/components/organisms/Form/DynamicForm/fields/FieldList/FieldList.tsx b/packages/ui/src/components/organisms/Form/DynamicForm/fields/FieldList/FieldList.tsx
index a35237a581..62877022b7 100644
--- a/packages/ui/src/components/organisms/Form/DynamicForm/fields/FieldList/FieldList.tsx
+++ b/packages/ui/src/components/organisms/Form/DynamicForm/fields/FieldList/FieldList.tsx
@@ -1,5 +1,6 @@
 import { Button } from '@/components/atoms';
 import { Renderer, TRendererSchema } from '@/components/organisms/Renderer';
+import { FocusEventHandler } from 'react';
 import { useDynamicForm } from '../../context';
 import { useElement, useField } from '../../hooks/external';
 import { useMountEvent } from '../../hooks/internal/useMountEvent';
@@ -28,14 +29,22 @@ export const FieldList: TDynamicFormField<IFieldListParams> = props => {
   const { stack } = useStack();
   const { element } = props;
   const { id: fieldId, hidden } = useElement(element, stack);
-  const { disabled } = useField(element, stack);
+  const { disabled, onFocus, onBlur } = useField(element, stack);
   const { addButtonLabel = 'Add Item', removeButtonLabel = 'Remove' } = element.params || {};
   const { items, addItem, removeItem } = useFieldList({ element });
 
-  if (hidden) return null;
+  if (hidden) {
+    return null;
+  }
 
   return (
-    <div className="flex flex-col gap-4" data-testid={`${fieldId}-fieldlist`}>
+    <div
+      className="flex flex-col gap-4"
+      data-testid={`${fieldId}-fieldlist`}
+      tabIndex={0}
+      onFocus={onFocus as FocusEventHandler<HTMLDivElement>}
+      onBlur={onBlur as FocusEventHandler<HTMLDivElement>}
+    >
       {items.map((_: unknown, index: number) => {
         return (
           <div
diff --git a/packages/ui/src/components/organisms/Form/DynamicForm/fields/FileField/FileField.tsx b/packages/ui/src/components/organisms/Form/DynamicForm/fields/FileField/FileField.tsx
index 036c4f149c..fdef445656 100644
--- a/packages/ui/src/components/organisms/Form/DynamicForm/fields/FileField/FileField.tsx
+++ b/packages/ui/src/components/organisms/Form/DynamicForm/fields/FileField/FileField.tsx
@@ -48,9 +48,13 @@ export const FileField: TDynamicFormField<IFileFieldParams> = ({ element }) => {
   }, [inputRef]);
 
   const file = useMemo(() => {
-    if (value instanceof File) return value;
+    if (value instanceof File) {
+      return value;
+    }
 
-    if (typeof value === 'string') return new File([], value);
+    if (typeof value === 'string') {
+      return new File([], value);
+    }
 
     return undefined;
   }, [value]);
@@ -71,6 +75,9 @@ export const FileField: TDynamicFormField<IFileFieldParams> = ({ element }) => {
           { 'pointer-events-none opacity-50': disabled || disabledWhileUploading },
         )}
         onClick={focusInputOnContainerClick}
+        tabIndex={0}
+        onFocus={onFocus}
+        onBlur={onBlur}
         data-testid={createTestId(element, stack)}
       >
         <div className="flex gap-3 text-[#007AFF]">
@@ -100,8 +107,6 @@ export const FileField: TDynamicFormField<IFileFieldParams> = ({ element }) => {
           accept={acceptFileFormats}
           disabled={disabled || disabledWhileUploading}
           onChange={handleChange}
-          onBlur={onBlur}
-          onFocus={onFocus}
           ref={inputRef}
           className="hidden"
         />
diff --git a/packages/ui/src/components/organisms/Form/DynamicForm/hooks/external/useField/useField.ts b/packages/ui/src/components/organisms/Form/DynamicForm/hooks/external/useField/useField.ts
index 9c6d3b05d0..fab0338481 100644
--- a/packages/ui/src/components/organisms/Form/DynamicForm/hooks/external/useField/useField.ts
+++ b/packages/ui/src/components/organisms/Form/DynamicForm/hooks/external/useField/useField.ts
@@ -48,22 +48,15 @@ export const useField = <TValue>(element: IFormElement<any, any>, stack?: TDeept
     [fieldId, valueDestination, setValue, sendEventAsync],
   );
 
-  const onBlur = useCallback(() => {
+  const onBlur = useCallback(async () => {
     sendEvent('onBlur');
 
     if (validationParams.validateOnBlur) {
       validate();
     }
 
-    setTimeout(() => setTouched(fieldId, true), (validationParams.validationDelay || 0) + 20);
-  }, [
-    sendEvent,
-    validationParams.validateOnBlur,
-    validationParams.validationDelay,
-    validate,
-    fieldId,
-    setTouched,
-  ]);
+    await setTouched(fieldId, true);
+  }, [sendEvent, validationParams.validateOnBlur, validate, fieldId, setTouched]);
 
   const onFocus = useCallback(() => {
     sendEvent('onFocus');
diff --git a/packages/ui/src/components/organisms/Form/DynamicForm/hooks/external/useField/useField.unit.test.ts b/packages/ui/src/components/organisms/Form/DynamicForm/hooks/external/useField/useField.unit.test.ts
index 79a30dc2f4..850ea24f0a 100644
--- a/packages/ui/src/components/organisms/Form/DynamicForm/hooks/external/useField/useField.unit.test.ts
+++ b/packages/ui/src/components/organisms/Form/DynamicForm/hooks/external/useField/useField.unit.test.ts
@@ -179,7 +179,7 @@ describe('useField', () => {
       expect(mockValidate).toHaveBeenCalled();
     });
 
-    it('should not validate when validateOnBlur is false', () => {
+    it('should not validate when validateOnBlur is false', async () => {
       vi.mocked(useDynamicForm).mockReturnValue({
         fieldHelpers: mockFieldHelpers,
         values: {},
@@ -191,13 +191,13 @@ describe('useField', () => {
 
       const { result } = renderHook(() => useField(mockElement, mockStack));
 
-      result.current.onBlur();
+      await result.current.onBlur();
 
       expect(mockSendEvent).toHaveBeenCalledWith('onBlur');
       expect(mockValidate).not.toHaveBeenCalled();
     });
 
-    it('should set touched state after validation delay', () => {
+    it('should set touched state after validation delay', async () => {
       vi.mocked(useDynamicForm).mockReturnValue({
         fieldHelpers: mockFieldHelpers,
         values: {},
@@ -210,10 +210,10 @@ describe('useField', () => {
 
       const { result } = renderHook(() => useField(mockElement, mockStack));
 
-      result.current.onBlur();
-
       expect(mockSetTouched).not.toHaveBeenCalled();
 
+      await result.current.onBlur();
+
       vi.advanceTimersByTime(120);
 
       expect(mockSetTouched).toHaveBeenCalledWith('test-field-1-2', true);
diff --git a/packages/ui/src/components/organisms/Form/DynamicForm/hooks/external/useSubmit/useSubmit.ts b/packages/ui/src/components/organisms/Form/DynamicForm/hooks/external/useSubmit/useSubmit.ts
index 907f2cc2b2..3126cdaa76 100644
--- a/packages/ui/src/components/organisms/Form/DynamicForm/hooks/external/useSubmit/useSubmit.ts
+++ b/packages/ui/src/components/organisms/Form/DynamicForm/hooks/external/useSubmit/useSubmit.ts
@@ -2,16 +2,15 @@ import { useCallback } from 'react';
 
 export interface IUseSubmitParams<TValues extends object> {
   onSubmit?: (values: TValues) => void;
-  values: TValues;
 }
 
-export const useSubmit = <TValues extends object>({
-  onSubmit,
-  values,
-}: IUseSubmitParams<TValues>) => {
-  const submit = useCallback(() => {
-    onSubmit?.(values);
-  }, [onSubmit, values]);
+export const useSubmit = <TValues extends object>({ onSubmit }: IUseSubmitParams<TValues>) => {
+  const submit = useCallback(
+    (values: TValues) => {
+      onSubmit?.(values);
+    },
+    [onSubmit],
+  );
 
   return { submit };
 };
diff --git a/packages/ui/src/components/organisms/Form/DynamicForm/hooks/external/useSubmit/useSubmit.unit.test.ts b/packages/ui/src/components/organisms/Form/DynamicForm/hooks/external/useSubmit/useSubmit.unit.test.ts
index ad3f5b5cda..31f6e5f118 100644
--- a/packages/ui/src/components/organisms/Form/DynamicForm/hooks/external/useSubmit/useSubmit.unit.test.ts
+++ b/packages/ui/src/components/organisms/Form/DynamicForm/hooks/external/useSubmit/useSubmit.unit.test.ts
@@ -13,7 +13,6 @@ describe('useSubmit', () => {
   const setup = (params = {}) => {
     return renderHook(() =>
       useSubmit({
-        values: mockValues,
         onSubmit: mockOnSubmit,
         ...params,
       }),
@@ -34,7 +33,7 @@ describe('useSubmit', () => {
   it('should call onSubmit with values when submit is called', () => {
     const { result } = setup();
 
-    result.current.submit();
+    result.current.submit(mockValues);
 
     expect(mockOnSubmit).toHaveBeenCalledTimes(1);
     expect(mockOnSubmit).toHaveBeenCalledWith(mockValues);
@@ -43,7 +42,7 @@ describe('useSubmit', () => {
   it('should not throw when onSubmit is not provided', () => {
     const { result } = setup({ onSubmit: undefined });
 
-    expect(() => result.current.submit()).not.toThrow();
+    expect(() => result.current.submit(mockValues)).not.toThrow();
   });
 
   it('should memoize submit function', () => {
diff --git a/packages/ui/src/components/organisms/Form/Validator/ValidatorProvider.tsx b/packages/ui/src/components/organisms/Form/Validator/ValidatorProvider.tsx
index 141b4ed5b0..31edb68a97 100644
--- a/packages/ui/src/components/organisms/Form/Validator/ValidatorProvider.tsx
+++ b/packages/ui/src/components/organisms/Form/Validator/ValidatorProvider.tsx
@@ -4,10 +4,10 @@ import { checkIfValid } from './helpers';
 import { useValidate } from './hooks/internal/useValidate';
 import { IValidatorRef, useValidatorRef } from './hooks/internal/useValidatorRef';
 import { IValidationSchema } from './types';
+import { IValidateParams } from './utils/validate/types';
 
-export interface IValidationParams {
+export interface IValidationParams extends IValidateParams {
   validateOnChange?: boolean;
-  validateSync?: boolean;
   validationDelay?: number;
   abortEarly?: boolean;
 }
@@ -25,21 +25,19 @@ export const ValidatorProvider = <TValue extends object>({
   schema,
   value,
   validateOnChange,
-  validateSync,
   abortEarly,
   validationDelay,
+  abortAfterFirstError,
   ref,
 }: IValidatorProviderProps<TValue>) => {
   useValidatorRef(ref);
   const { errors, validate } = useValidate(value, schema, {
     abortEarly,
-    validateSync,
     validateOnChange,
     validationDelay,
+    abortAfterFirstError,
   });
 
-  console.log('Validation errors', errors, schema);
-
   const context: IValidatorContext<TValue> = useMemo(
     () => ({ errors, values: value, isValid: checkIfValid(errors), validate }),
     [errors, value, validate],
diff --git a/packages/ui/src/components/organisms/Form/Validator/context/types.ts b/packages/ui/src/components/organisms/Form/Validator/context/types.ts
index f6fe1a939c..486a2e2b42 100644
--- a/packages/ui/src/components/organisms/Form/Validator/context/types.ts
+++ b/packages/ui/src/components/organisms/Form/Validator/context/types.ts
@@ -4,5 +4,5 @@ export interface IValidatorContext<TValues> {
   errors: IValidationError[];
   values: TValues;
   isValid: boolean;
-  validate: () => void;
+  validate: () => Promise<IValidationError[]>;
 }
diff --git a/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useAsyncValidate.ts b/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useAsyncValidate.ts
deleted file mode 100644
index 5dba2f72c0..0000000000
--- a/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useAsyncValidate.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { IValidationSchema } from '../../../types';
-
-import debounce from 'lodash/debounce';
-import { useCallback, useEffect, useState } from 'react';
-import { IValidationError } from '../../../types';
-import { validate } from '../../../utils/validate';
-
-export interface IUseAsyncValidateParams {
-  validationDelay?: number;
-  validateAsync?: boolean;
-  validateOnChange?: boolean;
-  abortEarly?: boolean;
-}
-
-export const useAsyncValidate = (
-  context: object,
-  schema: IValidationSchema[],
-  params: IUseAsyncValidateParams = {},
-) => {
-  const {
-    validationDelay = 500,
-    validateAsync = false,
-    validateOnChange = true,
-    abortEarly = false,
-  } = params;
-
-  const [validationErrors, setValidationErrors] = useState<IValidationError[]>(() =>
-    validateAsync ? validate(context, schema, { abortEarly }) : [],
-  );
-
-  const validateWithDebounce = useCallback(
-    debounce((context: object, schema: IValidationSchema[], params: IUseAsyncValidateParams) => {
-      const errors = validate(context, schema, params);
-      setValidationErrors(errors);
-    }, validationDelay),
-    [validationDelay],
-  );
-
-  useEffect(() => {
-    if (!validateAsync || !validateOnChange) return;
-
-    validateWithDebounce(context, schema, { abortEarly });
-  }, [context, schema, validateAsync, validateOnChange, abortEarly, validateWithDebounce]);
-
-  return validationErrors;
-};
diff --git a/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useAsyncValidate.unit.test.ts b/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useAsyncValidate.unit.test.ts
deleted file mode 100644
index d094575b09..0000000000
--- a/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useAsyncValidate.unit.test.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { validate } from '../../../utils/validate';
-import { useAsyncValidate } from './useAsyncValidate';
-
-// Mock dependencies
-vi.mock('../../../utils/validate');
-
-describe('useAsyncValidate', () => {
-  const mockContext = { name: 'John' };
-  const mockSchema = [{ id: 'name', validators: [], rules: [] }];
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-
-    vi.mocked(validate).mockReturnValue([
-      {
-        id: 'name',
-        originId: 'name',
-        message: ['error'],
-        invalidValue: 'John',
-      },
-    ]);
-
-    vi.useFakeTimers();
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  it('should initialize with empty validation errors', () => {
-    const { result } = renderHook(() => useAsyncValidate(mockContext, mockSchema));
-    expect(result.current).toEqual([]);
-  });
-
-  it('should not validate when validateAsync is false', () => {
-    renderHook(() => useAsyncValidate(mockContext, mockSchema, { validateAsync: false }));
-    expect(validate).not.toHaveBeenCalled();
-  });
-
-  it('should not validate when validateOnChange is false', () => {
-    renderHook(() => useAsyncValidate(mockContext, mockSchema, { validateOnChange: false }));
-    expect(validate).not.toHaveBeenCalled();
-  });
-
-  it('should validate and set errors when validateAsync and validateOnChange are true', () => {
-    const { result } = renderHook(() =>
-      useAsyncValidate(mockContext, mockSchema, {
-        validateAsync: true,
-        validateOnChange: true,
-      }),
-    );
-
-    vi.advanceTimersByTime(500);
-
-    expect(validate).toHaveBeenCalledWith(mockContext, mockSchema, { abortEarly: false });
-    expect(result.current).toEqual([
-      {
-        id: 'name',
-        originId: 'name',
-        message: ['error'],
-        invalidValue: 'John',
-      },
-    ]);
-  });
-
-  it('should pass abortEarly param to validate function', () => {
-    renderHook(() =>
-      useAsyncValidate(mockContext, mockSchema, {
-        validateAsync: true,
-        validateOnChange: true,
-        abortEarly: true,
-      }),
-    );
-
-    vi.advanceTimersByTime(500);
-
-    expect(validate).toHaveBeenCalledWith(mockContext, mockSchema, { abortEarly: true });
-  });
-
-  it('should revalidate when context changes', () => {
-    const { rerender } = renderHook(
-      ({ context }) =>
-        useAsyncValidate(context, mockSchema, {
-          validateAsync: true,
-          validateOnChange: true,
-        }),
-      {
-        initialProps: { context: mockContext },
-      },
-    );
-
-    const newContext = { name: 'Jane' };
-    rerender({ context: newContext });
-
-    vi.advanceTimersByTime(500);
-
-    expect(validate).toHaveBeenCalledWith(newContext, mockSchema, { abortEarly: false });
-  });
-
-  it('should revalidate when schema changes', () => {
-    const { rerender } = renderHook(
-      ({ schema }) =>
-        useAsyncValidate(mockContext, schema, {
-          validateAsync: true,
-          validateOnChange: true,
-        }),
-      {
-        initialProps: { schema: mockSchema },
-      },
-    );
-
-    const newSchema = [{ id: 'email', validators: [], rules: [] }];
-    rerender({ schema: newSchema });
-
-    vi.advanceTimersByTime(500);
-
-    expect(validate).toHaveBeenCalledWith(mockContext, newSchema, { abortEarly: false });
-  });
-});
diff --git a/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useManualValidate.ts b/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useManualValidate.ts
deleted file mode 100644
index 9b3d057558..0000000000
--- a/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useManualValidate.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useCallback, useState } from 'react';
-import { IValidationError, IValidationSchema } from '../../../types';
-import { validate } from '../../../utils/validate';
-
-export interface IUseManualValidateParams {
-  abortEarly?: boolean;
-}
-
-export const useManualValidate = (
-  context: object,
-  schema: IValidationSchema[],
-  params: IUseManualValidateParams = {},
-): [IValidationError[], () => void] => {
-  const [validationErrors, setValidationErrors] = useState<IValidationError[]>([]);
-
-  const { abortEarly = false } = params;
-
-  const _validate = useCallback(() => {
-    const errors = validate(context, schema, { abortEarly });
-    setValidationErrors(errors);
-  }, [context, schema, abortEarly]);
-
-  return [validationErrors, _validate];
-};
diff --git a/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useManualValidate.unit.test.ts b/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useManualValidate.unit.test.ts
deleted file mode 100644
index 48440ff59d..0000000000
--- a/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useManualValidate.unit.test.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { validate } from '../../../utils/validate';
-import { useManualValidate } from './useManualValidate';
-
-vi.mock('../../../utils/validate', () => ({
-  validate: vi.fn(),
-}));
-
-describe('useManualValidate', () => {
-  const mockContext = { name: 'John' };
-  const mockSchema = [{ id: 'name', validators: [], rules: [] }];
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('should initialize with empty validation errors', () => {
-    const { result } = renderHook(() => useManualValidate(mockContext, mockSchema));
-    const [validationErrors, validate] = result.current;
-
-    expect(validationErrors).toEqual([]);
-    expect(validate).toBeInstanceOf(Function);
-  });
-
-  it('should validate and set errors when validate is called', () => {
-    const { result } = renderHook(() => useManualValidate(mockContext, mockSchema));
-
-    vi.mocked(validate).mockReturnValue([
-      {
-        id: 'name',
-        originId: 'name',
-        message: ['error'],
-        invalidValue: 'John',
-      },
-    ]);
-
-    act(() => {
-      result.current[1]();
-    });
-
-    expect(vi.mocked(validate)).toHaveBeenCalledWith(mockContext, mockSchema, {
-      abortEarly: false,
-    });
-    expect(result.current[0]).toEqual([
-      {
-        id: 'name',
-        originId: 'name',
-        message: ['error'],
-        invalidValue: 'John',
-      },
-    ]);
-  });
-
-  it('should pass abortEarly param to validate function', () => {
-    const { result } = renderHook(() =>
-      useManualValidate(mockContext, mockSchema, { abortEarly: true }),
-    );
-
-    act(() => {
-      result.current[1]();
-    });
-
-    expect(vi.mocked(validate)).toHaveBeenCalledWith(mockContext, mockSchema, {
-      abortEarly: true,
-    });
-  });
-
-  it('should memoize validate callback with correct dependencies', () => {
-    const { result, rerender } = renderHook(
-      ({ context, schema, params }) => useManualValidate(context, schema, params),
-      {
-        initialProps: {
-          context: mockContext,
-          schema: mockSchema,
-          params: { abortEarly: false },
-        },
-      },
-    );
-
-    const [_, validate] = result.current;
-
-    const firstValidate = validate;
-
-    // Rerender with same props
-    rerender({
-      context: mockContext,
-      schema: mockSchema,
-      params: { abortEarly: false },
-    });
-
-    expect(validate).toBe(firstValidate);
-
-    // Rerender with different context
-    rerender({
-      context: { ...mockContext, newField: 'value' } as any,
-      schema: mockSchema,
-      params: { abortEarly: false },
-    });
-
-    expect(result.current[1]).not.toBe(firstValidate);
-  });
-});
diff --git a/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useSyncValidate.ts b/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useSyncValidate.ts
deleted file mode 100644
index 5ff722a949..0000000000
--- a/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useSyncValidate.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useMemo } from 'react';
-import { IValidationSchema } from '../../../types';
-import { validate } from '../../../utils/validate';
-
-export interface IUseSyncValidateParams {
-  abortEarly?: boolean;
-  validateSync?: boolean;
-  validateOnChange?: boolean;
-}
-
-export const useSyncValidate = (
-  context: object,
-  schema: IValidationSchema[],
-  params: IUseSyncValidateParams = {},
-) => {
-  const { abortEarly = false, validateSync = false, validateOnChange = true } = params;
-
-  return useMemo(() => {
-    if (!validateSync || !validateOnChange) return [];
-
-    return validate(context, schema, { abortEarly });
-  }, [context, schema, abortEarly, validateSync, validateOnChange]);
-};
diff --git a/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useSyncValidate.unit.test.ts b/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useSyncValidate.unit.test.ts
deleted file mode 100644
index f31a68aae1..0000000000
--- a/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useSyncValidate.unit.test.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { validate } from '../../../utils/validate';
-import { useSyncValidate } from './useSyncValidate';
-
-// Mock dependencies
-vi.mock('../../../utils/validate');
-
-describe('useSyncValidate', () => {
-  const mockContext = { name: 'John' };
-  const mockSchema = [{ id: 'name', validators: [], rules: [] }];
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-
-    vi.mocked(validate).mockReturnValue([
-      {
-        id: 'name',
-        originId: 'name',
-        message: ['error'],
-        invalidValue: 'John',
-      },
-    ]);
-  });
-
-  it('should initialize with empty validation errors when validateSync is false', () => {
-    const { result } = renderHook(() =>
-      useSyncValidate(mockContext, mockSchema, { validateSync: false }),
-    );
-    expect(result.current).toEqual([]);
-    expect(validate).not.toHaveBeenCalled();
-  });
-
-  it('should initialize with empty validation errors when validateOnChange is false', () => {
-    const { result } = renderHook(() =>
-      useSyncValidate(mockContext, mockSchema, { validateOnChange: false }),
-    );
-    expect(result.current).toEqual([]);
-    expect(validate).not.toHaveBeenCalled();
-  });
-
-  it('should validate and return errors when validateSync and validateOnChange are true', () => {
-    const { result } = renderHook(() =>
-      useSyncValidate(mockContext, mockSchema, {
-        validateSync: true,
-        validateOnChange: true,
-      }),
-    );
-
-    expect(validate).toHaveBeenCalledWith(mockContext, mockSchema, { abortEarly: false });
-    expect(result.current).toEqual([
-      {
-        id: 'name',
-        originId: 'name',
-        message: ['error'],
-        invalidValue: 'John',
-      },
-    ]);
-  });
-
-  it('should pass abortEarly param to validate function', () => {
-    renderHook(() =>
-      useSyncValidate(mockContext, mockSchema, {
-        validateSync: true,
-        validateOnChange: true,
-        abortEarly: true,
-      }),
-    );
-
-    expect(validate).toHaveBeenCalledWith(mockContext, mockSchema, { abortEarly: true });
-  });
-
-  it('should revalidate when context changes', () => {
-    const { rerender } = renderHook(
-      ({ context }) =>
-        useSyncValidate(context, mockSchema, {
-          validateSync: true,
-          validateOnChange: true,
-        }),
-      {
-        initialProps: { context: mockContext },
-      },
-    );
-
-    const newContext = { name: 'Jane' };
-    rerender({ context: newContext });
-
-    expect(validate).toHaveBeenCalledWith(newContext, mockSchema, { abortEarly: false });
-  });
-
-  it('should revalidate when schema changes', () => {
-    const { rerender } = renderHook(
-      ({ schema }) =>
-        useSyncValidate(mockContext, schema, {
-          validateSync: true,
-          validateOnChange: true,
-        }),
-      {
-        initialProps: { schema: mockSchema },
-      },
-    );
-
-    const newSchema = [{ id: 'email', validators: [], rules: [] }];
-    rerender({ schema: newSchema });
-
-    expect(validate).toHaveBeenCalledWith(mockContext, newSchema, { abortEarly: false });
-  });
-});
diff --git a/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useValidate.ts b/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useValidate.ts
index 7c8ebaef5a..5be0133e8b 100644
--- a/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useValidate.ts
+++ b/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useValidate.ts
@@ -1,14 +1,13 @@
-import { useMemo } from 'react';
-import { IValidationSchema } from '../../../types';
-import { useAsyncValidate } from './useAsyncValidate';
-import { useManualValidate } from './useManualValidate';
-import { useSyncValidate } from './useSyncValidate';
+import debounce from 'lodash/debounce';
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+import { IValidationError, IValidationSchema } from '../../../types';
+import { validate } from '../../../utils/validate';
 
 export interface IUseValidateParams {
   validateOnChange?: boolean;
-  validateSync?: boolean;
   validationDelay?: number;
   abortEarly?: boolean;
+  abortAfterFirstError?: boolean;
 }
 
 export const useValidate = (
@@ -18,42 +17,66 @@ export const useValidate = (
 ) => {
   const {
     validateOnChange = true,
-    validateSync = false,
-    validationDelay = 500,
+    validationDelay = undefined,
     abortEarly = false,
+    abortAfterFirstError = false,
   } = params;
 
-  const [manualValidationErrors, manualValidate] = useManualValidate(context, schema, {
-    abortEarly,
-  });
-  const syncValidationErrors = useSyncValidate(context, schema, {
-    abortEarly,
-    validateOnChange,
-    validateSync,
-  });
-  const asyncValidationErrors = useAsyncValidate(context, schema, {
-    abortEarly,
-    validateOnChange,
-    validateAsync: !validateSync,
-    validationDelay,
+  const [validationErrors, setValidationErrors] = useState<IValidationError[]>(() => {
+    if (validateOnChange && validationDelay === undefined) {
+      return validate(context, schema, { abortEarly, abortAfterFirstError });
+    }
+
+    return [];
   });
 
-  const validationErrors = useMemo(() => {
-    if (!validateOnChange) return manualValidationErrors;
+  const debouncedValidate = useCallback(
+    debounce((context, schema) => {
+      const errors = validate(context, schema, { abortEarly, abortAfterFirstError });
+      setValidationErrors(errors);
+    }, validationDelay),
+    [validationDelay],
+  );
+
+  const validateSyncCallback = useCallback(
+    (context: object, schema: IValidationSchema[]) => {
+      const errors = validate(context, schema, { abortEarly, abortAfterFirstError });
+      setValidationErrors(errors);
+    },
+    [abortEarly, abortAfterFirstError],
+  );
+
+  const externalValidate = useCallback((): Promise<IValidationError[]> => {
+    return new Promise(resolve => {
+      const errors = validate(context, schema, { abortEarly, abortAfterFirstError });
+      setValidationErrors(() => {
+        setTimeout(() => {
+          resolve(errors);
+        }, 10);
+
+        return errors;
+      });
+    });
+  }, [abortEarly, abortAfterFirstError, context, schema]);
+
+  useLayoutEffect(() => {
+    if (validateOnChange && validationDelay === undefined) {
+      validateSyncCallback(context, schema);
+    }
+  }, [validateOnChange, validateSyncCallback, context, schema, validationDelay]);
 
-    if (validateSync) return syncValidationErrors;
+  useEffect(() => {
+    if (validateOnChange && validationDelay === undefined) {
+      return;
+    }
 
-    return asyncValidationErrors;
-  }, [
-    manualValidationErrors,
-    syncValidationErrors,
-    asyncValidationErrors,
-    validateOnChange,
-    validateSync,
-  ]);
+    if (validateOnChange) {
+      debouncedValidate(context, schema);
+    }
+  }, [validateOnChange, context, schema, debouncedValidate, validationDelay]);
 
   return {
     errors: validationErrors,
-    validate: manualValidate,
+    validate: externalValidate,
   };
 };
diff --git a/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useValidate.unit.test.ts b/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useValidate.unit.test.ts
index f27d026236..5535b6aed4 100644
--- a/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useValidate.unit.test.ts
+++ b/packages/ui/src/components/organisms/Form/Validator/hooks/internal/useValidate/useValidate.unit.test.ts
@@ -1,524 +1,162 @@
-import { renderHook } from '@testing-library/react';
-import { afterEach, describe, expect, it, test, vi } from 'vitest';
-import { IValidationError, IValidationSchema } from '../../../types';
-import * as AsyncValidateModule from './useAsyncValidate';
-import * as ManualValidateModule from './useManualValidate';
-import * as SyncValidateModule from './useSyncValidate';
+import { act, renderHook, waitFor } from '@testing-library/react';
+import debounce from 'lodash/debounce';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { IValidationError, IValidationSchema } from '../../../types';
+import { validate } from '../../../utils/validate';
 import { useValidate } from './useValidate';
 
+vi.mock('lodash/debounce');
+vi.mock('../../../utils/validate');
+
 describe('useValidate', () => {
-  afterEach(() => {
+  const mockValidate = vi.mocked(validate);
+  const mockDebounce = vi.mocked(debounce);
+  const mockDebouncedValidate = vi.fn();
+
+  const mockContext = {
+    name: 'John',
+    age: 25,
+  };
+
+  const mockSchema = [
+    {
+      id: 'name',
+      valueDestination: 'name',
+      validators: [{ type: 'required', message: 'Name is required', value: {} }],
+    },
+  ] as IValidationSchema[];
+
+  const mockValidationErrors = [
+    {
+      id: 'name',
+      originId: 'name',
+      invalidValue: '',
+      message: ['Name is required'],
+    },
+  ];
+
+  beforeEach(() => {
     vi.clearAllMocks();
-    vi.restoreAllMocks();
-  });
-
-  it('should be defined', () => {
-    expect(useValidate).toBeDefined();
+    vi.useRealTimers();
+    mockValidate.mockReturnValue(mockValidationErrors);
+    // @ts-expect-error
+    mockDebounce.mockImplementation(fn => mockDebouncedValidate);
   });
 
-  describe('default params', () => {
-    it('should call manual validation hook', () => {
-      const context = {};
-      const schema: IValidationSchema[] = [];
-
-      const useManualValidate = vi.spyOn(ManualValidateModule, 'useManualValidate');
-
-      renderHook(() => useValidate(context, schema, {}));
-      expect(useManualValidate).toHaveBeenCalledWith(context, schema, { abortEarly: false });
-    });
-
-    it('should call sync validation hook', () => {
-      const context = {};
-      const schema: IValidationSchema[] = [];
-
-      const useSyncValidate = vi.spyOn(SyncValidateModule, 'useSyncValidate');
+  describe('validateOnChange', () => {
+    describe('validationDelay is not defined', () => {
+      it('should run validate on mount', () => {
+        renderHook(() => useValidate(mockContext, mockSchema));
 
-      renderHook(() => useValidate(context, schema, {}));
-      expect(useSyncValidate).toHaveBeenCalledWith(context, schema, {
-        abortEarly: false,
-        validateOnChange: true,
-        validateSync: false,
-      });
-    });
-
-    it('should call async validation hook', () => {
-      const context = {};
-      const schema: IValidationSchema[] = [];
-
-      const useAsyncValidate = vi.spyOn(AsyncValidateModule, 'useAsyncValidate');
-
-      renderHook(() => useValidate(context, schema, {}));
-      expect(useAsyncValidate).toHaveBeenCalledWith(context, schema, {
-        abortEarly: false,
-        validateOnChange: true,
-        validateAsync: true,
-        validationDelay: 500,
-      });
-    });
-  });
-
-  describe('custom params', () => {
-    describe('manual validation params', () => {
-      const case1 = [
-        {
-          abortEarly: true,
-        },
-        {
-          abortEarly: true,
-        },
-      ];
-
-      const case2 = [
-        {
-          abortEarly: false,
-        },
-        {
-          abortEarly: false,
-        },
-      ];
-
-      test.each([case1, case2])(
-        'should call manual validation hook with %s',
-        (inputParams, hookParams) => {
-          const context = {};
-          const schema: IValidationSchema[] = [];
-          const useManualValidate = vi.spyOn(ManualValidateModule, 'useManualValidate');
-
-          renderHook(() => useValidate(context, schema, inputParams));
-          expect(useManualValidate).toHaveBeenCalledWith(context, schema, hookParams);
-        },
-      );
-    });
-
-    describe('sync validation params', () => {
-      const case1 = [
-        {
-          validateSync: true,
-          abortEarly: true,
-          validateOnChange: true,
-        },
-        {
-          validateSync: true,
-          abortEarly: true,
-          validateOnChange: true,
-        },
-      ];
-
-      const case2 = [
-        {
-          validateSync: false,
-          abortEarly: false,
-          validateOnChange: false,
-        },
-        {
-          validateSync: false,
+        expect(mockValidate).toHaveBeenCalledWith(mockContext, mockSchema, {
           abortEarly: false,
-          validateOnChange: false,
-        },
-      ];
-
-      test.each([case1, case2])(
-        'should call sync validation hook with %s',
-        (inputParams, hookParams) => {
-          const context = {};
-          const schema: IValidationSchema[] = [];
-          const useSyncValidate = vi.spyOn(SyncValidateModule, 'useSyncValidate');
-
-          renderHook(() => useValidate(context, schema, inputParams));
-          expect(useSyncValidate).toHaveBeenCalledWith(context, schema, hookParams);
-        },
-      );
-    });
-
-    describe('async validation params', () => {
-      const case1 = [
-        {
-          validateSync: false,
-          abortEarly: true,
-          validateOnChange: true,
-          validationDelay: 500,
-        },
-        {
-          validateAsync: true,
-          abortEarly: true,
-          validateOnChange: true,
-          validationDelay: 500,
-        },
-      ];
-
-      const case2 = [
-        {
-          validateSync: true,
-          abortEarly: true,
-          validateOnChange: true,
-          validationDelay: 500,
-        },
-        {
-          // Validate sync disables async validation
-          validateAsync: false,
-          abortEarly: true,
-          validateOnChange: true,
-          validationDelay: 500,
-        },
-      ];
-
-      test.each([case1, case2])(
-        'should call async validation hook with %s',
-        (inputParams, hookParams) => {
-          const context = {};
-          const schema: IValidationSchema[] = [];
-          const useAsyncValidate = vi.spyOn(AsyncValidateModule, 'useAsyncValidate');
-
-          renderHook(() => useValidate(context, schema, inputParams));
-          expect(useAsyncValidate).toHaveBeenCalledWith(context, schema, hookParams);
-        },
-      );
-    });
-  });
-
-  describe('correct validation error resolving', () => {
-    it('will return manual validation errors if validateOnChange is false', () => {
-      const context = {};
-      const schema: IValidationSchema[] = [
-        {
-          id: 'name',
-          valueDestination: 'name',
-          validators: [
-            {
-              type: 'required',
-              value: {},
-              message: 'Name is required',
-            },
-          ],
-        },
-      ];
-      const errors: IValidationError[] = [
-        {
-          id: 'name',
-          originId: 'name',
-          invalidValue: undefined,
-          message: ['Name is required'],
-        },
-      ];
-
-      vi.spyOn(ManualValidateModule, 'useManualValidate').mockReturnValue([errors, vi.fn()]);
-
-      const { result } = renderHook(() =>
-        useValidate(context, schema, { validateOnChange: false }),
-      );
-
-      expect(result.current.errors).toEqual(errors);
-    });
-
-    it('will return sync validation errors if validateOnChange is true and validateSync is true', () => {
-      const context = {};
-      const schema: IValidationSchema[] = [
-        {
-          id: 'name',
-          valueDestination: 'name',
-          validators: [
-            {
-              type: 'required',
-              value: {},
-              message: 'Name is required',
-            },
-          ],
-        },
-      ];
-      const errors: IValidationError[] = [
-        {
-          id: 'name',
-          originId: 'name',
-          invalidValue: undefined,
-          message: ['Name is required'],
-        },
-      ];
-
-      vi.spyOn(SyncValidateModule, 'useSyncValidate').mockReturnValue(errors);
-
-      const { result } = renderHook(() =>
-        useValidate(context, schema, { validateOnChange: true, validateSync: true }),
-      );
-
-      expect(result.current.errors).toEqual(errors);
-    });
-
-    it('will return async validation errors if validateOnChange is true and validateSync is false', () => {
-      const context = {};
-      const schema: IValidationSchema[] = [
-        {
-          id: 'name',
-          valueDestination: 'name',
-          validators: [
-            {
-              type: 'required',
-              value: {},
-              message: 'Name is required',
-            },
-          ],
-        },
-      ];
-      const errors: IValidationError[] = [
-        {
-          id: 'name',
-          originId: 'name',
-          invalidValue: undefined,
-          message: ['Name is required'],
-        },
-      ];
-
-      vi.spyOn(AsyncValidateModule, 'useAsyncValidate').mockReturnValue(errors);
-
-      const { result } = renderHook(() =>
-        useValidate(context, schema, { validateOnChange: true, validateSync: false }),
-      );
+          abortAfterFirstError: false,
+        });
+      });
 
-      expect(result.current.errors).toEqual(errors);
-    });
-  });
+      it('should re run validate on context change', async () => {
+        const initialContext = { ...mockContext, name: 'Jane' };
 
-  describe('validation', () => {
-    describe('auto validation', () => {
-      it('should validate context and return validation errors', async () => {
-        const context = {};
-        const schema: IValidationSchema[] = [
+        const { rerender } = renderHook(
+          ({ context, schema, options }) => useValidate(context, schema, options),
           {
-            id: 'name',
-            valueDestination: 'name',
-            validators: [
-              {
-                type: 'required',
-                value: {},
-                message: 'Name is required',
-              },
-            ],
+            initialProps: {
+              context: initialContext,
+              schema: mockSchema,
+              options: { validateOnChange: true, validationDelay: undefined },
+            },
           },
-        ];
-
-        const { result } = renderHook(() => useValidate(context, schema));
+        );
 
-        expect(result.current.errors).toEqual([
-          {
-            id: 'name',
-            originId: 'name',
-            invalidValue: undefined,
-            message: ['Name is required'],
-          },
-        ]);
+        const updatedContext = { ...mockContext, name: 'Jane' };
+        rerender({
+          context: updatedContext,
+          schema: mockSchema,
+          options: { validateOnChange: true, validationDelay: undefined },
+        });
 
-        vi.useRealTimers();
+        await waitFor(() => {
+          expect(mockValidate).toHaveBeenCalledWith(updatedContext, mockSchema, {
+            abortEarly: false,
+            abortAfterFirstError: false,
+          });
+        });
       });
     });
 
-    describe('manual validation', () => {
-      it('should validate context and return validation errors on validate call', async () => {
-        const context = {};
-        const schema: IValidationSchema[] = [
-          {
-            id: 'name',
-            valueDestination: 'name',
-            validators: [
-              {
-                type: 'required',
-                value: {},
-                message: 'Name is required',
-              },
-            ],
-          },
-        ];
-
-        const { result, rerender } = renderHook(() =>
-          useValidate(context, schema, { validateSync: true, validateOnChange: false }),
+    describe('validationDelay is defined', async () => {
+      it('should run validate after validationDelay', async () => {
+        vi.useFakeTimers();
+        renderHook(() =>
+          useValidate(mockContext, mockSchema, { validateOnChange: true, validationDelay: 100 }),
         );
 
-        expect(result.current.errors).toEqual([]);
+        await vi.advanceTimersByTime(100);
+        expect(mockDebouncedValidate).toHaveBeenCalled();
+        expect(mockDebouncedValidate).toHaveBeenCalledOnce();
+      });
 
-        result.current.validate();
+      it('should re-run validate after validationDelay', async () => {
+        vi.useFakeTimers();
 
-        rerender();
+        const initialContext = { ...mockContext, name: 'Jane' };
 
-        expect(result.current.errors).toEqual([
+        const { rerender } = renderHook(
+          ({ context, schema, options }) => useValidate(context, schema, options),
           {
-            id: 'name',
-            originId: 'name',
-            invalidValue: undefined,
-            message: ['Name is required'],
-          },
-        ]);
-      });
-    });
-
-    describe('validation on change', () => {
-      describe('sync', () => {
-        it('should validate context and return validation errors on change', () => {
-          let context: { name?: string } = {};
-          const schema: IValidationSchema[] = [
-            {
-              id: 'name',
-              valueDestination: 'name',
-              validators: [
-                {
-                  type: 'required',
-                  value: {},
-                  message: 'Name is required',
-                },
-              ],
-            },
-          ];
-          const errors: IValidationError[] = [
-            {
-              id: 'name',
-              originId: 'name',
-              invalidValue: undefined,
-              message: ['Name is required'],
+            initialProps: {
+              context: initialContext,
+              schema: mockSchema,
+              options: { validateOnChange: true, validationDelay: 100 },
             },
-          ];
-
-          const { result, rerender } = renderHook(() =>
-            useValidate(context, schema, { validateOnChange: true, validateSync: true }),
-          );
-
-          expect(result.current.errors).toEqual(errors);
-
-          context = { name: 'John' };
+          },
+        );
 
-          rerender();
+        await vi.advanceTimersByTime(100);
+        expect(mockDebouncedValidate).toHaveBeenCalledWith(initialContext, mockSchema);
 
-          expect(result.current.errors).toEqual([]);
+        const updatedContext = { ...mockContext, name: 'John' }; // Changed name to actually be different
+        rerender({
+          context: updatedContext,
+          schema: mockSchema,
+          options: { validateOnChange: true, validationDelay: 100 },
         });
-      });
-
-      describe('async', () => {
-        it('should validate context and return validation errors on change', async () => {
-          vi.useFakeTimers();
 
-          let context: { name?: string } = {};
-          const schema: IValidationSchema[] = [
-            {
-              id: 'name',
-              valueDestination: 'name',
-              validators: [
-                {
-                  type: 'required',
-                  value: {},
-                  message: 'Name is required',
-                },
-              ],
-            },
-          ];
-          const errors: IValidationError[] = [
-            {
-              id: 'name',
-              originId: 'name',
-              invalidValue: undefined,
-              message: ['Name is required'],
-            },
-          ];
-
-          const { result, rerender } = renderHook(() => useValidate(context, schema, {}));
-
-          expect(result.current.errors).toEqual(errors);
-
-          context = { name: 'John' };
-
-          rerender();
-
-          await vi.advanceTimersByTimeAsync(600);
-
-          expect(result.current.errors).toEqual([]);
-        });
+        await vi.advanceTimersByTime(100);
+        expect(mockDebouncedValidate).toHaveBeenCalledWith(updatedContext, mockSchema);
+        expect(mockDebouncedValidate).toHaveBeenCalledTimes(2);
       });
     });
   });
 
-  describe('specific features', () => {
-    describe('abort early', () => {
-      it('should abort early if abortEarly is true and return first error', () => {
-        const context = {};
-        const schema: IValidationSchema[] = [
-          {
-            id: 'firstName',
-            valueDestination: 'firstName',
-            validators: [
-              {
-                type: 'required',
-                value: {},
-                message: 'First name is required',
-              },
-            ],
-          },
-          {
-            id: 'lastName',
-            valueDestination: 'lastName',
-            validators: [
-              {
-                type: 'required',
-                value: {},
-                message: 'Last name is required',
-              },
-            ],
-          },
-        ];
-
-        const { result } = renderHook(() =>
-          useValidate(context, schema, { abortEarly: true, validateSync: true }),
-        );
+  describe('validate method', () => {
+    it('should return latest validation errors', async () => {
+      const errors = [
+        { field: 'name', message: 'Name is required' },
+        { field: 'email', message: 'Invalid email format' },
+        { field: 'age', message: 'Age must be a number' },
+      ];
+      vi.mocked(mockValidate).mockReturnValue(errors as unknown as IValidationError[]);
+      const { result } = renderHook(() => useValidate(mockContext, mockSchema));
 
-        expect(result.current.errors).toEqual([
-          {
-            id: 'firstName',
-            originId: 'firstName',
-            invalidValue: undefined,
-            message: ['First name is required'],
-          },
-        ]);
+      const validationResult = await result.current.validate();
+      expect(mockValidate).toHaveBeenCalledWith(mockContext, mockSchema, {
+        abortEarly: false,
+        abortAfterFirstError: false,
       });
+      expect(validationResult).toEqual(errors);
+    });
 
-      it('should not abort early if abortEarly is false', () => {
-        const context = {};
-        const schema: IValidationSchema[] = [
-          {
-            id: 'firstName',
-            valueDestination: 'firstName',
-            validators: [
-              {
-                type: 'required',
-                value: {},
-                message: 'First name is required',
-              },
-            ],
-          },
-          {
-            id: 'lastName',
-            valueDestination: 'lastName',
-            validators: [
-              {
-                type: 'required',
-                value: {},
-                message: 'Last name is required',
-              },
-            ],
-          },
-        ];
+    it('should update validation errors state', async () => {
+      const { result, rerender } = renderHook(() => useValidate(mockContext, mockSchema));
 
-        const { result } = renderHook(() =>
-          useValidate(context, schema, { abortEarly: false, validateSync: true }),
-        );
+      await act(async () => {
+        await result.current.validate();
+        rerender();
+      });
 
-        expect(result.current.errors).toEqual([
-          {
-            id: 'firstName',
-            originId: 'firstName',
-            invalidValue: undefined,
-            message: ['First name is required'],
-          },
-          {
-            id: 'lastName',
-            originId: 'lastName',
-            invalidValue: undefined,
-            message: ['Last name is required'],
-          },
-        ]);
+      await waitFor(() => {
+        expect(result.current.errors).toEqual(mockValidationErrors);
       });
     });
   });
diff --git a/packages/ui/src/components/organisms/Form/Validator/types/index.ts b/packages/ui/src/components/organisms/Form/Validator/types/index.ts
index 652f7136ff..2068e1a237 100644
--- a/packages/ui/src/components/organisms/Form/Validator/types/index.ts
+++ b/packages/ui/src/components/organisms/Form/Validator/types/index.ts
@@ -1,3 +1,5 @@
+import { IUseValidateParams } from '../hooks/internal/useValidate';
+
 export type TBaseValidationRules = 'json-logic';
 
 export interface IValidationRule {
@@ -53,3 +55,5 @@ export type TValidator<
 > = (value: T, validator: ICommonValidator<TValidatorParams, TValidatorType>) => void;
 
 export type TDeepthLevelStack = number[] | undefined;
+
+export type TValidationParams = IUseValidateParams;
diff --git a/packages/ui/src/components/organisms/Form/Validator/utils/validate/exceptions.ts b/packages/ui/src/components/organisms/Form/Validator/utils/validate/exceptions.ts
new file mode 100644
index 0000000000..93bc55a189
--- /dev/null
+++ b/packages/ui/src/components/organisms/Form/Validator/utils/validate/exceptions.ts
@@ -0,0 +1,5 @@
+export class AbortAfterFirstErrorException extends Error {
+  constructor() {
+    super('Abort after first error');
+  }
+}
diff --git a/packages/ui/src/components/organisms/Form/Validator/utils/validate/types.ts b/packages/ui/src/components/organisms/Form/Validator/utils/validate/types.ts
index 5efd730a3f..777a8e5c9c 100644
--- a/packages/ui/src/components/organisms/Form/Validator/utils/validate/types.ts
+++ b/packages/ui/src/components/organisms/Form/Validator/utils/validate/types.ts
@@ -1,3 +1,4 @@
 export interface IValidateParams {
   abortEarly?: boolean;
+  abortAfterFirstError?: boolean;
 }
diff --git a/packages/ui/src/components/organisms/Form/Validator/utils/validate/validate.ts b/packages/ui/src/components/organisms/Form/Validator/utils/validate/validate.ts
index a0f55896db..c26d252981 100644
--- a/packages/ui/src/components/organisms/Form/Validator/utils/validate/validate.ts
+++ b/packages/ui/src/components/organisms/Form/Validator/utils/validate/validate.ts
@@ -10,6 +10,7 @@ import {
 import { createValidationError } from '../create-validation-error';
 import { formatValueDestination } from '../format-value-destination';
 import { getValidator } from '../get-validator';
+import { AbortAfterFirstErrorException } from './exceptions';
 import { isShouldApplyValidation } from './helpers';
 import { IValidateParams } from './types';
 
@@ -21,7 +22,7 @@ export const validate = <
   schema: Array<IValidationSchema<TValidatorTypeExtends>>,
   params: IValidateParams = {},
 ): IValidationError[] => {
-  const { abortEarly = false } = params;
+  const { abortEarly = false, abortAfterFirstError = false } = params;
 
   const validationErrors: IValidationError[] = [];
 
@@ -29,43 +30,56 @@ export const validate = <
     schema: Array<IValidationSchema<TValidatorTypeExtends>>,
     stack: TDeepthLevelStack = [],
   ) => {
-    schema.forEach(schema => {
-      const { validators = [], children, valueDestination, id } = schema;
+    for (let i = 0; i < schema.length; i++) {
+      const { validators = [], children, valueDestination, id } = schema[i]!;
       const formattedValueDestination = valueDestination
         ? formatValueDestination(valueDestination, stack)
         : '';
 
       const value = formattedValueDestination ? get(context, formattedValueDestination) : context;
 
-      for (const validator of validators) {
-        if (
-          validator.applyWhen &&
-          !isShouldApplyValidation(
-            replaceTagsWithIndexesInRule([validator.applyWhen], stack)[0],
-            context,
-          )
-        ) {
-          continue;
-        }
+      try {
+        for (const validator of validators) {
+          if (
+            validator.applyWhen &&
+            !isShouldApplyValidation(
+              replaceTagsWithIndexesInRule([validator.applyWhen], stack)[0],
+              context,
+            )
+          ) {
+            continue;
+          }
+
+          const validate = getValidator(validator);
 
-        const validate = getValidator(validator);
+          try {
+            validate(value, validator as unknown as ICommonValidator);
+          } catch (exception) {
+            const error = createValidationError({
+              id,
+              invalidValue: value,
+              message: (exception as Error).message,
+              stack,
+            });
 
-        try {
-          validate(value, validator as unknown as ICommonValidator);
-        } catch (exception) {
-          const error = createValidationError({
-            id,
-            invalidValue: value,
-            message: (exception as Error).message,
-            stack,
-          });
+            validationErrors.push(error);
 
-          validationErrors.push(error);
+            if (abortAfterFirstError) {
+              throw new AbortAfterFirstErrorException();
+            }
 
-          if (abortEarly) {
-            throw validationErrors;
+            // Validation of all schema will be stopped if at least one error is found
+            if (abortEarly) {
+              throw validationErrors;
+            }
           }
         }
+      } catch (exception) {
+        if (exception instanceof AbortAfterFirstErrorException) {
+          continue;
+        }
+
+        throw exception;
       }
 
       if (children?.length && Array.isArray(value)) {
@@ -73,7 +87,7 @@ export const validate = <
           run(children as Array<IValidationSchema<TValidatorTypeExtends>>, [...stack, index]);
         });
       }
-    });
+    }
   };
 
   try {
diff --git a/packages/ui/src/components/organisms/Form/Validator/utils/validate/validate.unit.test.ts b/packages/ui/src/components/organisms/Form/Validator/utils/validate/validate.unit.test.ts
index 2e13e79e0e..225d784e59 100644
--- a/packages/ui/src/components/organisms/Form/Validator/utils/validate/validate.unit.test.ts
+++ b/packages/ui/src/components/organisms/Form/Validator/utils/validate/validate.unit.test.ts
@@ -74,6 +74,97 @@ describe('validate', () => {
       });
     });
 
+    describe('abort at first error', () => {
+      it('should return only first error for each field when abortAtFirstError is true', () => {
+        const testValue = {
+          name: null,
+          age: 25,
+        };
+
+        const schema = [
+          {
+            id: 'name',
+            valueDestination: 'name',
+            validators: [
+              { type: 'required', message: 'Name is required.', value: {} },
+              {
+                type: 'minLength',
+                message: 'Name must be at least 2 chars',
+                value: { minLength: 2 },
+              },
+            ],
+          },
+          {
+            id: 'age',
+            valueDestination: 'age',
+            validators: [
+              {
+                type: 'maximum',
+                message: 'Age must be 20 or less',
+                value: { maximum: 20 },
+              },
+              {
+                type: 'minimum',
+                message: 'Age must be at least 18',
+                value: { minimum: 18 },
+              },
+            ],
+          },
+        ] as IValidationSchema[];
+
+        const errors = validate(testValue, schema, { abortAfterFirstError: true });
+
+        expect(errors.length).toBe(2);
+        expect(errors?.[0]?.message).toEqual(['Name is required.']);
+        expect(errors?.[1]?.message).toEqual(['Age must be 20 or less']);
+      });
+
+      it('should return all errors for each field when abortAtFirstError is false', () => {
+        const testValue = {
+          name: '',
+          age: 25,
+        };
+
+        const schema = [
+          {
+            id: 'name',
+            valueDestination: 'name',
+            validators: [
+              { type: 'required', message: 'Name is required.', value: {} },
+              {
+                type: 'minLength',
+                message: 'Name must be at least 2 chars',
+                value: { minLength: 2 },
+              },
+            ],
+          },
+          {
+            id: 'age',
+            valueDestination: 'age',
+            validators: [
+              {
+                type: 'maximum',
+                message: 'Age must be 20 or less',
+                value: { maximum: 20 },
+              },
+              {
+                type: 'minimum',
+                message: 'Age must be at least 18',
+                value: { minimum: 18 },
+              },
+            ],
+          },
+        ] as IValidationSchema[];
+
+        const errors = validate(testValue, schema, { abortAfterFirstError: false });
+
+        expect(errors.length).toBe(3);
+        expect(errors?.[0]?.message).toEqual(['Name is required.']);
+        expect(errors?.[1]?.message).toEqual(['Name must be at least 2 chars']);
+        expect(errors?.[2]?.message).toEqual(['Age must be 20 or less']);
+      });
+    });
+
     describe('plain objects', () => {
       describe('will be valid', () => {
         const requiredCase = [
@@ -817,7 +908,9 @@ describe('validate', () => {
 
       it('even number validator', () => {
         const evenNumberValidator = (value: number, _: ICommonValidator) => {
-          if (typeof value !== 'number') return true;
+          if (typeof value !== 'number') {
+            return true;
+          }
 
           if (value % 2 !== 0) {
             throw new Error('Number is not even');
diff --git a/packages/ui/src/components/organisms/Form/hooks/useRuleEngine/useRuleEngine.unit.test.ts b/packages/ui/src/components/organisms/Form/hooks/useRuleEngine/useRuleEngine.unit.test.ts
index bf98d800cd..4e8d35f6b2 100644
--- a/packages/ui/src/components/organisms/Form/hooks/useRuleEngine/useRuleEngine.unit.test.ts
+++ b/packages/ui/src/components/organisms/Form/hooks/useRuleEngine/useRuleEngine.unit.test.ts
@@ -46,7 +46,7 @@ describe('useRuleEngine', () => {
     const { result } = renderHook(() => useRuleEngine(context, { rules, executeRulesSync: false }));
 
     // Wait for debounced execution
-    await vi.advanceTimersByTimeAsync(600);
+    await vi.advanceTimersByTimeAsync(500);
 
     // Assert
     expect(result.current).toEqual(expectedResults);