diff --git a/src/components/DemoPage/DemoPage.tsx b/src/components/DemoPage/DemoPage.tsx
index 0d74c688..7b97610f 100644
--- a/src/components/DemoPage/DemoPage.tsx
+++ b/src/components/DemoPage/DemoPage.tsx
@@ -19,8 +19,11 @@ import { MutableRefObject, useCallback, useEffect, useRef, useState } from 'reac
 
 import { Build, GroupBuild } from 'pnc-api-types-ts';
 
+import { productMilestoneEntityAttributes } from 'common/productMilestoneEntityAttributes';
+
 import { useDataBuffer } from 'hooks/useDataBuffer';
 import { IFieldConfigs, IFieldValues, useForm } from 'hooks/useForm';
+import { useServiceContainer } from 'hooks/useServiceContainer';
 import { useTitle } from 'hooks/useTitle';
 
 import { ActionButton } from 'components/ActionButton/ActionButton';
@@ -41,8 +44,10 @@ import { ProductMilestoneReleaseLabel } from 'components/ProductMilestoneRelease
 import { ScmRepositoryLink } from 'components/ScmRepositoryLink/ScmRepositoryLink';
 import { ScmRepositoryUrl } from 'components/ScmRepositoryUrl/ScmRepositoryUrl';
 import { SearchSelect } from 'components/SearchSelect/SearchSelect';
+import { TextInputAsyncValidated } from 'components/TextInputAsyncValidated/TextInputAsyncValidated';
 import { TooltipWrapper } from 'components/TooltipWrapper/TooltipWrapper';
 
+import * as productMilestoneApi from 'services/productMilestoneApi';
 import * as projectApi from 'services/projectApi';
 
 import { maxLength, minLength } from 'utils/formValidationHelpers';
@@ -53,10 +58,15 @@ import mockBuildData from './data/mock-build-data.json';
 
 const buildRes: Build[] = mockBuildData;
 
+const validateMultipleFields = (fieldValues: IFieldValues): boolean => {
+  return !!fieldValues.inputFieldA && !!fieldValues.version;
+};
+
 const fieldConfigs = {
   inputFieldA: {
     isRequired: true,
     validators: [
+      { validator: validateMultipleFields, errorMessage: 'inputFieldA and version must be defined.', relatedFields: ['version'] },
       { validator: minLength(2), errorMessage: 'Text must be at least two characters long.' },
       {
         validator: maxLength(10),
@@ -67,6 +77,16 @@ const fieldConfigs = {
   selectA: {
     isRequired: true,
   },
+  version: {
+    isRequired: true,
+    validators: [
+      {
+        validator: validateMultipleFields,
+        errorMessage: 'version and inputFieldA must be defined.',
+        relatedFields: ['inputFieldA'],
+      },
+    ],
+  },
 } satisfies IFieldConfigs;
 
 const initLogData = [
@@ -230,6 +250,9 @@ export const DemoPage = () => {
     });
   };
 
+  const serviceContainerValidateProductMilestone = useServiceContainer(productMilestoneApi.validateProductMilestoneVersion, 0);
+  const serviceContainerValidateProductMilestone2 = useServiceContainer(productMilestoneApi.validateProductMilestoneVersion, 0);
+
   const selectOptions = [{ value: 'Build' }, { value: 'Option' }, { value: 'Project' }, { value: 'Version' }];
 
   const [isSelectOpen, setIsSelectOpen] = useState<boolean>(false);
@@ -345,6 +368,47 @@ export const DemoPage = () => {
                   )}
                 />
               </FormGroup>
+              <FormGroup
+                isRequired
+                label={productMilestoneEntityAttributes.version.title}
+                fieldId={productMilestoneEntityAttributes.version.id}
+                helperText={
+                  <FormHelperText isHidden={getFieldState(productMilestoneEntityAttributes.version.id) !== 'error'} isError>
+                    {getFieldErrors(productMilestoneEntityAttributes.version.id)}
+                  </FormHelperText>
+                }
+              >
+                <TextInputAsyncValidated
+                  isRequired
+                  type="text"
+                  id={productMilestoneEntityAttributes.version.id}
+                  name={productMilestoneEntityAttributes.version.id}
+                  autoComplete="off"
+                  {...register<string>(productMilestoneEntityAttributes.version.id, {
+                    ...fieldConfigs.version,
+                    validators: [
+                      ...fieldConfigs.version.validators,
+                      {
+                        asyncValidator: (value) =>
+                          serviceContainerValidateProductMilestone.run({
+                            serviceData: {
+                              data: { productVersionId: '101', version: '2.0.' + value },
+                            },
+                          }),
+                      },
+                      {
+                        asyncValidator: (value) =>
+                          serviceContainerValidateProductMilestone2.run({
+                            serviceData: {
+                              data: { productVersionId: '101', version: '2.0.' + value },
+                            },
+                          }),
+                      },
+                    ],
+                  })}
+                  prefixComponent={<>2.0</>}
+                />
+              </FormGroup>
               <ActionGroup>
                 <Button variant="primary" isDisabled={isSubmitDisabled} onClick={handleSubmit(submitForm)}>
                   Submit
diff --git a/src/components/FormInput/FormInput.tsx b/src/components/FormInput/FormInput.tsx
index a5723fcd..de02c404 100644
--- a/src/components/FormInput/FormInput.tsx
+++ b/src/components/FormInput/FormInput.tsx
@@ -13,9 +13,17 @@ interface IFormInputProps<T extends TValue> extends IRegisterData<T> {
  * @param onChange - On-change callback of the input
  * @param onBlur - On-blur callback of the input
  * @param validated - Input state
+ * @param validationState - State of the input validation
  * @param render - Function to render the form input component
  * @returns
  */
-export const FormInput = <T extends TValue>({ value, onChange, onBlur, validated, render }: IFormInputProps<T>) => {
-  return render({ value, onChange, onBlur, validated });
+export const FormInput = <T extends TValue>({
+  value,
+  onChange,
+  onBlur,
+  validated,
+  validationState,
+  render,
+}: IFormInputProps<T>) => {
+  return render({ value, onChange, onBlur, validated, validationState });
 };
diff --git a/src/components/ProductMilestoneCreateEditPage/ProductMilestoneCreateEditPage.tsx b/src/components/ProductMilestoneCreateEditPage/ProductMilestoneCreateEditPage.tsx
index 73ec0b97..11178437 100644
--- a/src/components/ProductMilestoneCreateEditPage/ProductMilestoneCreateEditPage.tsx
+++ b/src/components/ProductMilestoneCreateEditPage/ProductMilestoneCreateEditPage.tsx
@@ -1,14 +1,4 @@
-import {
-  ActionGroup,
-  Button,
-  Form,
-  FormGroup,
-  FormHelperText,
-  InputGroup,
-  InputGroupText,
-  Switch,
-  TextInput,
-} from '@patternfly/react-core';
+import { ActionGroup, Button, Form, FormGroup, FormHelperText, Switch } from '@patternfly/react-core';
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
@@ -28,6 +18,7 @@ import { FormInput } from 'components/FormInput/FormInput';
 import { PageLayout } from 'components/PageLayout/PageLayout';
 import { ServiceContainerCreatingUpdating } from 'components/ServiceContainers/ServiceContainerCreatingUpdating';
 import { ServiceContainerLoading } from 'components/ServiceContainers/ServiceContainerLoading';
+import { TextInputAsyncValidated } from 'components/TextInputAsyncValidated/TextInputAsyncValidated';
 import { TooltipWrapper } from 'components/TooltipWrapper/TooltipWrapper';
 
 import * as productMilestoneApi from 'services/productMilestoneApi';
@@ -52,6 +43,7 @@ const fieldConfigs = {
   version: {
     // TODO: NCL-8162 implementing async validation
     isRequired: true,
+    validators: [],
   },
   startingDate: {
     isRequired: true,
@@ -101,6 +93,8 @@ export const ProductMilestoneCreateEditPage = ({ isEditPage = false }: IProductM
 
   const serviceContainerProductVersionPatch = useServiceContainer(productVersionApi.patchProductVersion);
 
+  const serviceContainerValidateProductMilestone = useServiceContainer(productMilestoneApi.validateProductMilestoneVersion, 0);
+
   const { register, setFieldValues, getFieldState, getFieldErrors, handleSubmit, isSubmitDisabled } = useForm();
 
   const isProductMilestoneCurrent = serviceContainerProductVersion.data?.currentProductMilestone?.id === productMilestoneId;
@@ -224,21 +218,35 @@ export const ProductMilestoneCreateEditPage = ({ isEditPage = false }: IProductM
             </FormHelperText>
           }
         >
-          <InputGroup>
-            <InputGroupText>
+          <TextInputAsyncValidated
+            isRequired
+            type="text"
+            id={productMilestoneEntityAttributes.version.id}
+            name={productMilestoneEntityAttributes.version.id}
+            isDisabled={!serviceContainerProductVersion.data}
+            autoComplete="off"
+            {...register<string>(productMilestoneEntityAttributes.version.id, {
+              ...fieldConfigs.version,
+              validators: [
+                ...fieldConfigs.version.validators,
+                {
+                  asyncValidator: (value) =>
+                    serviceContainerProductVersion.data?.version
+                      ? serviceContainerValidateProductMilestone.run({
+                          serviceData: {
+                            data: { productVersionId, version: serviceContainerProductVersion.data.version + '.' + value },
+                          },
+                        })
+                      : Promise.reject(new Error('"version" property of Product Version is undefined')),
+                },
+              ],
+            })}
+            prefixComponent={
               <ServiceContainerLoading {...serviceContainerProductVersion} variant="icon" title="Product Version">
                 {serviceContainerProductVersion.data?.version}.
               </ServiceContainerLoading>
-            </InputGroupText>
-            <TextInput
-              isRequired
-              type="text"
-              id={productMilestoneEntityAttributes.version.id}
-              name={productMilestoneEntityAttributes.version.id}
-              autoComplete="off"
-              {...register<string>(productMilestoneEntityAttributes.version.id, fieldConfigs.version)}
-            />
-          </InputGroup>
+            }
+          />
         </FormGroup>
         <FormGroup
           isRequired
@@ -300,7 +308,7 @@ export const ProductMilestoneCreateEditPage = ({ isEditPage = false }: IProductM
         <ActionGroup>
           <Button
             variant="primary"
-            isDisabled={isSubmitDisabled || !!serviceContainerProductVersion.error}
+            isDisabled={isSubmitDisabled || !!serviceContainerProductVersion.loading || !!serviceContainerProductVersion.error}
             onClick={handleSubmit(isEditPage ? submitUpdate : submitCreate)}
           >
             {isEditPage ? 'Update' : 'Create'} Milestone
diff --git a/src/components/SearchSelect/SearchSelect.tsx b/src/components/SearchSelect/SearchSelect.tsx
index fc3e54a5..a68c73d6 100644
--- a/src/components/SearchSelect/SearchSelect.tsx
+++ b/src/components/SearchSelect/SearchSelect.tsx
@@ -5,7 +5,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { FILTERING_PLACEHOLDER_DEFAULT } from 'common/constants';
 
-import { useServiceContainer } from 'hooks/useServiceContainer';
+import { isServiceError, useServiceContainer } from 'hooks/useServiceContainer';
 
 import '../../index.css';
 import styles from './SearchSelect.module.css';
@@ -110,7 +110,7 @@ export const SearchSelect = ({
           }
         })
         .catch((error: Error) => {
-          if (error.name !== 'CanceledError') {
+          if (isServiceError(error)) {
             setPageIndex(pageIndexDefault);
             setFetchedData([]);
           }
diff --git a/src/components/StateCard/ErrorStateCard.tsx b/src/components/StateCard/ErrorStateCard.tsx
index 7af73e3e..765fb1bc 100644
--- a/src/components/StateCard/ErrorStateCard.tsx
+++ b/src/components/StateCard/ErrorStateCard.tsx
@@ -38,9 +38,7 @@ export const ErrorStateCard = ({ title, error, variant = 'block' }: IErrorStateC
     return (
       <span>
         <TooltipWrapper tooltip={errorTitle}>
-          <Icon status="danger">
-            <ExclamationCircleIcon />
-          </Icon>
+          <ExclamationCircleIcon color="#c9190b" />
         </TooltipWrapper>
       </span>
     );
diff --git a/src/components/TextInputAsyncValidated/TextInputAsyncValidated.tsx b/src/components/TextInputAsyncValidated/TextInputAsyncValidated.tsx
new file mode 100644
index 00000000..9c2d861b
--- /dev/null
+++ b/src/components/TextInputAsyncValidated/TextInputAsyncValidated.tsx
@@ -0,0 +1,42 @@
+import { InputGroup, InputGroupText, TextInput, TextInputProps } from '@patternfly/react-core';
+import { ReactNode } from 'react';
+
+import { IRegisterData } from 'hooks/useForm';
+
+import { LoadingSpinner } from 'components/LoadingSpinner/LoadingSpinner';
+import { ErrorStateCard } from 'components/StateCard/ErrorStateCard';
+import { TooltipWrapper } from 'components/TooltipWrapper/TooltipWrapper';
+
+interface ITextInputAsyncValidatedProps extends TextInputProps {
+  validationState?: IRegisterData<string>['validationState'];
+  prefixComponent: ReactNode;
+}
+
+/**
+ * Text input with state of async validation.
+ * When async validation is being fetched, spinner is displayed.
+ * When async validation request failed, error icon is displayed.
+ *
+ * props: same as TextInputProps + IRegisterData, and:
+ * @param prefixComponent - Prefix of the text input
+ */
+export const TextInputAsyncValidated = (props: ITextInputAsyncValidatedProps) => (
+  <InputGroup>
+    {props.prefixComponent && <InputGroupText>{props.prefixComponent}</InputGroupText>}
+    <TextInput {...props} />
+
+    {props.validationState === 'validating' && (
+      <InputGroupText>
+        <TooltipWrapper tooltip="Validating input..">
+          <LoadingSpinner isInline />
+        </TooltipWrapper>
+      </InputGroupText>
+    )}
+
+    {props.validationState === 'error' && (
+      <InputGroupText>
+        <ErrorStateCard title="validation" variant="icon" />
+      </InputGroupText>
+    )}
+  </InputGroup>
+);
diff --git a/src/hooks/useForm.ts b/src/hooks/useForm.ts
index 572e90a3..9236404d 100644
--- a/src/hooks/useForm.ts
+++ b/src/hooks/useForm.ts
@@ -1,9 +1,11 @@
 import { TextInputProps } from '@patternfly/react-core';
 import { AxiosError, isAxiosError } from 'axios';
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 
 import { PncError, isPncError } from 'common/PncError';
 
+import { isServiceError } from 'hooks/useServiceContainer';
+
 import { uiLogger } from 'services/uiLogger';
 
 import { transformFormToValues } from 'utils/patchHelper';
@@ -12,9 +14,12 @@ export type TValue = string | number | boolean;
 
 type TState = TextInputProps['validated'];
 
+type TValidationState = 'default' | 'validating' | 'error';
+
 interface IValidator {
-  validator: (value: any) => boolean;
-  errorMessage: string;
+  validator?: (value: any) => boolean;
+  asyncValidator?: (value: any) => Promise<any>;
+  errorMessage?: string;
   relatedFields?: string[];
 }
 
@@ -22,11 +27,12 @@ interface IField<T extends TValue> {
   value?: T;
   errorMessages?: string[];
   state?: TState;
+  validationState?: TValidationState;
   isRequired?: boolean;
   validators?: IValidator[];
 }
 
-export type TFieldConfig<T extends TValue> = Omit<IField<T>, 'errorMessages' | 'state'>;
+export type TFieldConfig<T extends TValue> = Omit<IField<T>, 'errorMessages' | 'state' | 'validationState'>;
 
 export interface IFields {
   [fieldName: string]: IField<TValue>;
@@ -45,6 +51,7 @@ export interface IRegisterData<T extends TValue> {
   onChange: OnChangeFunction<T>;
   onBlur: OnBlurFunction;
   validated: TState;
+  validationState?: TValidationState;
 }
 
 type OnSubmitCallback = (data: IFieldValues) => Promise<any>;
@@ -55,6 +62,8 @@ export interface IFieldValues {
   [fieldName: string]: any;
 }
 
+const INPUT_VALIDATION_DELAY_MS = 200;
+
 /**
  * Hook to manage values, validation and states of form inputs.
  * Validation of an input is run on change of its value. Then adequate state and error messages are set.
@@ -68,9 +77,13 @@ export interface IFieldValues {
  * For multi-field validations (validating relationships between multiple fields), use validator with relatedFields property defined.
  * relatedFields specifies IDs of other fields that are in multi-field validation group.
  *
+ * For async validations (validating input on backend), use 'asyncValidator' property of the validator object.
+ * Async validations are executed after a delay (200 ms) to prevent unnecessary requests.
+ * Text inputs validated asynchronously should use dedicated component: {@link TextInputAsyncValidated}
+ *
  * See related components: {@link FormInput}
  *
- * See example usages: {@link ProjectCreateEditPage} {@link ScmRepositoryCreateEditPage}
+ * See example usages: {@link ProjectCreateEditPage} {@link ScmRepositoryCreateEditPage} {@link ProductMilestoneCreateEditPage}
  *
  * @returns object containing:
  *  - register         - function registering an input and returning its value, state and on-change function
@@ -88,24 +101,34 @@ export const useForm = () => {
   const [isSubmitDisabled, setIsSubmitDisabled] = useState<boolean>(true);
   const [hasFormChanged, setHasFormChanged] = useState<boolean>(false);
 
+  const timeouts = useRef<{ [fieldName: string]: NodeJS.Timeout | undefined }>({});
+
   const register = <T extends TValue>(fieldName: string, fieldConfig?: TFieldConfig<T>): IRegisterData<T> => {
     if (!fields[fieldName]) {
-      setFields((fields) => ({ ...fields, [fieldName]: { ...fieldConfig, value: fieldConfig?.value || '', state: 'default' } }));
+      setFields((fields) => ({
+        ...fields,
+        [fieldName]: { ...fieldConfig, value: fieldConfig?.value || '', state: 'default', validationState: 'default' },
+      }));
     }
 
     return {
       value: fields[fieldName]?.value as T,
-      onChange: handleChange<T>(fieldName),
+      onChange: handleChange<T>(fieldName, fieldConfig),
       onBlur: handleBlur<T>(fieldName),
       validated: fields[fieldName]?.state,
+      validationState: fields[fieldName]?.validationState,
     };
   };
 
-  const handleChange = <T extends TValue>(fieldName: string): OnChangeFunction<T> => {
+  const handleChange = <T extends TValue>(fieldName: string, fieldConfig?: TFieldConfig<T>): OnChangeFunction<T> => {
     return (value: T) => {
+      const asyncValidators =
+        fieldConfig?.validators?.filter((validator) => validator.asyncValidator).map((validator) => validator.asyncValidator) ||
+        [];
+
       setFields((fields) => {
         const newFields = { ...fields };
-        newFields[fieldName] = constructNewFieldOnChange<T>(fieldName, newFields, value);
+        newFields[fieldName] = constructNewFieldOnChange<T>(fieldName, newFields, value, !!asyncValidators.length);
 
         // to prevent multiple updates when one field is contained in multiple relatedFields
         const updatedFields: string[] = [];
@@ -116,42 +139,95 @@ export const useForm = () => {
             multiFieldValidator.relatedFields!.forEach((relatedField) => {
               if (!updatedFields.includes(relatedField)) {
                 updatedFields.push(relatedField);
-                newFields[relatedField] = constructNewFieldOnChange<T>(relatedField, newFields);
+                newFields[relatedField] = constructNewFieldOnChange<T>(relatedField, newFields, undefined);
               }
             });
           });
 
-        const isFormValid = () => {
-          for (const fieldName in newFields) {
-            if (newFields[fieldName].errorMessages?.length) {
-              return false;
-            }
-          }
-
-          return true;
-        };
-
-        const areRequiredFilled = () => {
-          for (const fieldName in newFields) {
-            const oldValue = newFields[fieldName].value;
-            const value = typeof oldValue === 'string' ? oldValue?.trim() : oldValue;
-            if (newFields[fieldName].isRequired && !value) {
-              return false;
-            }
-          }
-
-          return true;
-        };
-
-        setIsSubmitDisabled(!isFormValid() || !areRequiredFilled());
+        if (!asyncValidators.length) {
+          setIsSubmitDisabled(!isFormValid(newFields) || !areRequiredFilled(newFields));
+        } else {
+          setIsSubmitDisabled(true);
+        }
 
         return newFields;
       });
 
+      if (asyncValidators.length) {
+        clearTimeout(timeouts.current[fieldName]);
+        timeouts.current[fieldName] = setTimeout(() => {
+          const oldTimeout = timeouts.current[fieldName];
+
+          Promise.all(
+            asyncValidators.map((asyncValidator) =>
+              asyncValidator!(value).then((response: any) => {
+                if (oldTimeout === timeouts.current[fieldName] && response?.data?.hints) {
+                  return response.data.hints;
+                }
+
+                return [];
+              })
+            )
+          )
+            .then((errorMessagesArrays: string[][]) => {
+              const errorMessages = errorMessagesArrays.flat();
+
+              setFields((fields) => {
+                const newFields = { ...fields };
+
+                newFields[fieldName] = constructNewFieldOnAsyncValidation(fieldName, newFields, errorMessages);
+
+                if (!errorMessages.length) {
+                  setIsSubmitDisabled(!isFormValid(newFields) || !areRequiredFilled(newFields));
+                }
+
+                return newFields;
+              });
+            })
+            .catch((error: any) => {
+              if (isServiceError(error)) {
+                setFields((fields) => {
+                  const newFields = { ...fields, [fieldName]: { ...fields[fieldName] } };
+
+                  newFields[fieldName].validationState = 'error';
+
+                  return newFields;
+                });
+              }
+            });
+        }, INPUT_VALIDATION_DELAY_MS);
+      }
+
       setHasFormChanged(true);
     };
   };
 
+  const isFormValid = (fields: IFields) => {
+    for (const fieldName in fields) {
+      if (fields[fieldName].errorMessages?.length) {
+        return false;
+      }
+
+      if (fields[fieldName]?.validationState === 'validating') {
+        return false;
+      }
+    }
+
+    return true;
+  };
+
+  const areRequiredFilled = (fields: IFields) => {
+    for (const fieldName in fields) {
+      const oldValue = fields[fieldName].value;
+      const value = typeof oldValue === 'string' ? oldValue?.trim() : oldValue;
+      if (fields[fieldName].isRequired && !value) {
+        return false;
+      }
+    }
+
+    return true;
+  };
+
   const handleBlur = <T extends TValue>(fieldName: string): OnBlurFunction => {
     return () => {
       setFields((fields) => {
@@ -164,14 +240,20 @@ export const useForm = () => {
     };
   };
 
-  const constructNewFieldOnChange = <T extends TValue>(fieldName: string, fields: IFields, newValue?: T): IField<T> => {
+  const constructNewFieldOnChange = <T extends TValue>(
+    fieldName: string,
+    fields: IFields,
+    newValue?: T,
+    isValidating?: boolean
+  ): IField<T> => {
     const newField = { ...(fields[fieldName] as IField<T>) };
 
     if (newValue !== undefined) {
       newField.value = constructNewFieldValue<T>(newValue);
     }
     newField.errorMessages = constructNewFieldErrorMessages(fieldName, { ...fields, [fieldName]: newField });
-    newField.state = constructNewFieldState(fieldName, { ...fields, [fieldName]: newField });
+    newField.state = constructNewFieldState(fieldName, { ...fields, [fieldName]: newField }, isValidating);
+    newField.validationState = isValidating ? 'validating' : 'default';
 
     return newField;
   };
@@ -192,6 +274,21 @@ export const useForm = () => {
     return newValue;
   };
 
+  const constructNewFieldOnAsyncValidation = <T extends TValue>(
+    fieldName: string,
+    fields: IFields,
+    newErrorMessages?: string[]
+  ): IField<T> => {
+    const newField = { ...(fields[fieldName] as IField<T>) };
+
+    const oldErrorMessages = newField.errorMessages ? newField.errorMessages : [];
+    newField.errorMessages = [...oldErrorMessages, ...(newErrorMessages ? newErrorMessages : [])];
+    newField.state = constructNewFieldState(fieldName, { ...fields, [fieldName]: newField });
+    newField.validationState = 'default';
+
+    return newField;
+  };
+
   const constructNewFieldErrorMessages = (fieldName: string, fields: IFields): string[] => {
     const value = fields[fieldName].value;
     const trimmedValue = typeof value === 'string' ? value.trim() : value;
@@ -207,7 +304,7 @@ export const useForm = () => {
       for (const validator of fields[fieldName].validators!) {
         const data = validator.relatedFields?.length ? transformFormToValues(fields) : trimmedValue;
 
-        if (!validator.validator(data)) {
+        if (validator.validator && validator.errorMessage && !validator.validator(data)) {
           newErrorMessages.push(validator.errorMessage);
         }
       }
@@ -216,16 +313,20 @@ export const useForm = () => {
     return newErrorMessages;
   };
 
-  const constructNewFieldState = (fieldName: string, fields: IFields): TState => {
+  const constructNewFieldState = (fieldName: string, fields: IFields, isValidating?: boolean): TState => {
     if (fields[fieldName]?.errorMessages?.length) {
       return 'error';
-    } else {
-      if (fields[fieldName].value) {
-        return 'success';
-      } else {
-        return 'default';
-      }
     }
+
+    if (isValidating) {
+      return 'default';
+    }
+
+    if (fields[fieldName].value) {
+      return 'success';
+    }
+
+    return 'default';
   };
 
   const setFieldValues = useCallback((fieldValues: IFieldValues) => {
diff --git a/src/hooks/useServiceContainer.ts b/src/hooks/useServiceContainer.ts
index 13c1df44..f69c827e 100644
--- a/src/hooks/useServiceContainer.ts
+++ b/src/hooks/useServiceContainer.ts
@@ -108,7 +108,7 @@ export const useServiceContainer = (service: Function, loadingStateDelayMs: numb
       .catch((error: Error | AxiosError) => {
         const errorMessage = getErrorMessage(error);
 
-        if (error.name !== 'CanceledError') {
+        if (isServiceError(error)) {
           // execute only for last request
           if (loadingCount.current <= 1) {
             // In a future React version (potentially in React 17) this could be removed as it will be default behavior
@@ -119,8 +119,9 @@ export const useServiceContainer = (service: Function, loadingStateDelayMs: numb
               setData(DataValues.noData);
             });
           }
-          throw error;
         }
+
+        throw error;
       })
       .finally(() => {
         loadingCount.current--;
@@ -142,6 +143,8 @@ export const useServiceContainer = (service: Function, loadingStateDelayMs: numb
   };
 };
 
+export const isServiceError = (error: Error | AxiosError): boolean => error.name !== 'CanceledError';
+
 const getErrorMessage = (error: Error | AxiosError): string => {
   if (isAxiosError(error)) {
     if (error.code === AxiosError.ERR_NETWORK) {