remix-validated-form 4.0.0-beta.0 → 4.0.1

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
 $ npm run build:browser && npm run build:main
 
-> remix-validated-form@3.4.2 build:browser
+> remix-validated-form@4.0.1-beta.1 build:browser
 > tsc --module ESNext --outDir ./browser
 
 
-> remix-validated-form@3.4.2 build:main
+> remix-validated-form@4.0.1-beta.1 build:main
 > tsc --module CommonJS --outDir ./build
 

package/browser/ValidatedForm.d.ts

@@ -47,4 +47,4 @@ export declare type FormProps<DataType> = {
 /**
  * The primary form component of `remix-validated-form`.
  */
-export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, ...rest }: FormProps<DataType>): JSX.Element;
+export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, method, replace, ...rest }: FormProps<DataType>): JSX.Element;

package/browser/ValidatedForm.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Form as RemixForm, useActionData, useFormAction, useSubmit, useTransition, } from "@remix-run/react";
+import { Form as RemixForm, useActionData, useSubmit, useTransition, } from "@remix-run/react";
 import uniq from "lodash/uniq";
 import React, { useEffect, useMemo, useRef, useState, } from "react";
 import invariant from "tiny-invariant";
@@ -30,19 +30,16 @@ function useFieldErrors(fieldErrorsFromBackend) {
     }, [fieldErrorsFromBackend]);
     return [fieldErrors, setFieldErrors];
 }
-const useIsSubmitting = (action, subaction, fetcher) => {
-    const actionForCurrentPage = useFormAction();
-    const pendingFormSubmit = useTransition().submission;
-    if (fetcher)
-        return fetcher.state === "submitting";
-    if (!pendingFormSubmit)
-        return false;
-    const { formData, action: pendingAction } = pendingFormSubmit;
-    const pendingSubAction = formData.get("subaction");
-    const expectedAction = action !== null && action !== void 0 ? action : actionForCurrentPage;
-    if (subaction)
-        return expectedAction === pendingAction && subaction === pendingSubAction;
-    return expectedAction === pendingAction && !pendingSubAction;
+const useIsSubmitting = (fetcher) => {
+    const [isSubmitStarted, setSubmitStarted] = useState(false);
+    const transition = useTransition();
+    const hasActiveSubmission = fetcher
+        ? fetcher.state === "submitting"
+        : !!transition.submission;
+    const isSubmitting = hasActiveSubmission && isSubmitStarted;
+    const startSubmit = () => setSubmitStarted(true);
+    const endSubmit = () => setSubmitStarted(false);
+    return [isSubmitting, startSubmit, endSubmit];
 };
 const getDataFromForm = (el) => new FormData(el);
 /**
@@ -110,11 +107,11 @@ const focusFirstInvalidInput = (fieldErrors, customFocusHandlers, formElement) =
 /**
  * The primary form component of `remix-validated-form`.
  */
-export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, ...rest }) {
+export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, method, replace, ...rest }) {
     var _a;
     const backendError = useErrorResponseForThisForm(fetcher, subaction);
     const [fieldErrors, setFieldErrors] = useFieldErrors(backendError === null || backendError === void 0 ? void 0 : backendError.fieldErrors);
-    const isSubmitting = useIsSubmitting(action, subaction, fetcher);
+    const [isSubmitting, startSubmit, endSubmit] = useIsSubmitting(fetcher);
     const defaultsToUse = useDefaultValues(backendError === null || backendError === void 0 ? void 0 : backendError.repopulateFields, defaultValues);
     const [touchedFields, setTouchedFields] = useState({});
     const [hasBeenSubmitted, setHasBeenSubmitted] = useState(false);
@@ -122,6 +119,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
     const formRef = useRef(null);
     useSubmitComplete(isSubmitting, () => {
         var _a;
+        endSubmit();
         if (!backendError && resetAfterSubmit) {
             (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
         }
@@ -131,7 +129,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
         fieldErrors,
         action,
         defaultValues: defaultsToUse,
-        isSubmitting: isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : false,
+        isSubmitting,
         isValid: Object.keys(fieldErrors).length === 0,
         touchedFields,
         setFieldTouched: (fieldName, touched) => setTouchedFields((prev) => ({
@@ -205,11 +203,13 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             window.removeEventListener("click", handleClick);
         };
     }, []);
-    return (_jsx(Form, { ref: mergeRefs([formRef, formRefProp]), ...rest, action: action, onSubmit: async (e) => {
+    return (_jsx(Form, { ref: mergeRefs([formRef, formRefProp]), ...rest, action: action, method: method, replace: replace, onSubmit: async (e) => {
             e.preventDefault();
             setHasBeenSubmitted(true);
+            startSubmit();
             const result = await validator.validate(getDataFromForm(e.currentTarget));
             if (result.error) {
+                endSubmit();
                 setFieldErrors(result.error.fieldErrors);
                 if (!disableFocusOnError) {
                     focusFirstInvalidInput(result.error.fieldErrors, customFocusHandlers(), formRef.current);
@@ -220,7 +220,10 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
                 if (fetcher)
                     fetcher.submit(clickedButtonRef.current || e.currentTarget);
                 else
-                    submit(clickedButtonRef.current || e.currentTarget);
+                    submit(clickedButtonRef.current || e.currentTarget, {
+                        method,
+                        replace,
+                    });
                 clickedButtonRef.current = null;
             }
         }, onReset: (event) => {

package/browser/hooks.d.ts

@@ -1,5 +1,4 @@
 import { GetInputProps, ValidationBehaviorOptions } from "./internal/getInputProps";
-import { ValidationState } from "./types";
 export declare type FieldProps = {
     /**
      * The validation error message if there is one.
@@ -13,14 +12,6 @@ export declare type FieldProps = {
      * Validates the field.
      */
     validate: () => void;
-    /**
-     * The validation state of the field.
-     * - idle: the field has not been validated yet.
-     * - validating: the field is currently being validated.
-     * - valid: the field is valid.
-     * - invalid: the field is invalid.
-     */
-    validationState: ValidationState;
     /**
      * The default value of the field, if there is one.
      */

package/browser/hooks.js

@@ -1,6 +1,6 @@
 import get from "lodash/get";
 import toPath from "lodash/toPath";
-import { useContext, useEffect, useMemo, useState } from "react";
+import { useContext, useEffect, useMemo } from "react";
 import { FormContext } from "./internal/formContext";
 import { createGetInputProps, } from "./internal/getInputProps";
 const useInternalFormContext = (hookName) => {
@@ -16,37 +16,24 @@ export const useField = (name, options) => {
     const { fieldErrors, clearError, validateField, defaultValues, registerReceiveFocus, touchedFields, setFieldTouched, hasBeenSubmitted, } = useInternalFormContext("useField");
     const isTouched = !!touchedFields[name];
     const { handleReceiveFocus } = options !== null && options !== void 0 ? options : {};
-    const [isValidating, setValidating] = useState(false);
     useEffect(() => {
         if (handleReceiveFocus)
             return registerReceiveFocus(name, handleReceiveFocus);
     }, [handleReceiveFocus, name, registerReceiveFocus]);
     const field = useMemo(() => {
-        const error = fieldErrors[name];
-        const getValidationState = () => {
-            if (isValidating)
-                return "validating";
-            if (error)
-                return "invalid";
-            if (!isTouched && !hasBeenSubmitted)
-                return "idle";
-            return "valid";
-        };
         const helpers = {
-            error,
+            error: fieldErrors[name],
             clearError: () => {
                 clearError(name);
             },
             validate: () => {
-                setValidating(true);
-                validateField(name).then((error) => setValidating(false));
+                validateField(name);
             },
             defaultValue: defaultValues
                 ? get(defaultValues, toPath(name), undefined)
                 : undefined,
             touched: isTouched,
             setTouched: (touched) => setFieldTouched(name, touched),
-            validationState: getValidationState(),
         };
         const getInputProps = createGetInputProps({
             ...helpers,
@@ -65,7 +52,6 @@ export const useField = (name, options) => {
         isTouched,
         hasBeenSubmitted,
         options === null || options === void 0 ? void 0 : options.validationBehavior,
-        isValidating,
         clearError,
         validateField,
         setFieldTouched,

package/browser/server.d.ts

@@ -4,7 +4,7 @@ import { ValidatorError } from "./validation/types";
  * When you return this from your action, `ValidatedForm` on the frontend will automatically
  * display the errors on the correct fields on the correct form.
  *
- * _Recommended_: You can also provide a second argument to `validationError`
+ * You can also provide a second argument to `validationError`
  * to specify how to repopulate the form when JS is disabled.
  *
  * @example

package/browser/server.js

@@ -4,7 +4,7 @@ import { json } from "@remix-run/server-runtime";
  * When you return this from your action, `ValidatedForm` on the frontend will automatically
  * display the errors on the correct fields on the correct form.
  *
- * _Recommended_: You can also provide a second argument to `validationError`
+ * You can also provide a second argument to `validationError`
  * to specify how to repopulate the form when JS is disabled.
  *
  * @example

package/build/ValidatedForm.d.ts

@@ -47,4 +47,4 @@ export declare type FormProps<DataType> = {
 /**
  * The primary form component of `remix-validated-form`.
  */
-export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, ...rest }: FormProps<DataType>): JSX.Element;
+export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, method, replace, ...rest }: FormProps<DataType>): JSX.Element;

package/build/ValidatedForm.js

@@ -55,19 +55,16 @@ function useFieldErrors(fieldErrorsFromBackend) {
     }, [fieldErrorsFromBackend]);
     return [fieldErrors, setFieldErrors];
 }
-const useIsSubmitting = (action, subaction, fetcher) => {
-    const actionForCurrentPage = (0, react_1.useFormAction)();
-    const pendingFormSubmit = (0, react_1.useTransition)().submission;
-    if (fetcher)
-        return fetcher.state === "submitting";
-    if (!pendingFormSubmit)
-        return false;
-    const { formData, action: pendingAction } = pendingFormSubmit;
-    const pendingSubAction = formData.get("subaction");
-    const expectedAction = action !== null && action !== void 0 ? action : actionForCurrentPage;
-    if (subaction)
-        return expectedAction === pendingAction && subaction === pendingSubAction;
-    return expectedAction === pendingAction && !pendingSubAction;
+const useIsSubmitting = (fetcher) => {
+    const [isSubmitStarted, setSubmitStarted] = (0, react_2.useState)(false);
+    const transition = (0, react_1.useTransition)();
+    const hasActiveSubmission = fetcher
+        ? fetcher.state === "submitting"
+        : !!transition.submission;
+    const isSubmitting = hasActiveSubmission && isSubmitStarted;
+    const startSubmit = () => setSubmitStarted(true);
+    const endSubmit = () => setSubmitStarted(false);
+    return [isSubmitting, startSubmit, endSubmit];
 };
 const getDataFromForm = (el) => new FormData(el);
 /**
@@ -135,11 +132,11 @@ const focusFirstInvalidInput = (fieldErrors, customFocusHandlers, formElement) =
 /**
  * The primary form component of `remix-validated-form`.
  */
-function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, ...rest }) {
+function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, method, replace, ...rest }) {
     var _a;
     const backendError = useErrorResponseForThisForm(fetcher, subaction);
     const [fieldErrors, setFieldErrors] = useFieldErrors(backendError === null || backendError === void 0 ? void 0 : backendError.fieldErrors);
-    const isSubmitting = useIsSubmitting(action, subaction, fetcher);
+    const [isSubmitting, startSubmit, endSubmit] = useIsSubmitting(fetcher);
     const defaultsToUse = useDefaultValues(backendError === null || backendError === void 0 ? void 0 : backendError.repopulateFields, defaultValues);
     const [touchedFields, setTouchedFields] = (0, react_2.useState)({});
     const [hasBeenSubmitted, setHasBeenSubmitted] = (0, react_2.useState)(false);
@@ -147,6 +144,7 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
     const formRef = (0, react_2.useRef)(null);
     (0, submissionCallbacks_1.useSubmitComplete)(isSubmitting, () => {
         var _a;
+        endSubmit();
         if (!backendError && resetAfterSubmit) {
             (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
         }
@@ -156,7 +154,7 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
         fieldErrors,
         action,
         defaultValues: defaultsToUse,
-        isSubmitting: isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : false,
+        isSubmitting,
         isValid: Object.keys(fieldErrors).length === 0,
         touchedFields,
         setFieldTouched: (fieldName, touched) => setTouchedFields((prev) => ({
@@ -230,11 +228,13 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
             window.removeEventListener("click", handleClick);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(Form, { ref: (0, util_1.mergeRefs)([formRef, formRefProp]), ...rest, action: action, onSubmit: async (e) => {
+    return ((0, jsx_runtime_1.jsx)(Form, { ref: (0, util_1.mergeRefs)([formRef, formRefProp]), ...rest, action: action, method: method, replace: replace, onSubmit: async (e) => {
             e.preventDefault();
             setHasBeenSubmitted(true);
+            startSubmit();
             const result = await validator.validate(getDataFromForm(e.currentTarget));
             if (result.error) {
+                endSubmit();
                 setFieldErrors(result.error.fieldErrors);
                 if (!disableFocusOnError) {
                     focusFirstInvalidInput(result.error.fieldErrors, customFocusHandlers(), formRef.current);
@@ -245,7 +245,10 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
                 if (fetcher)
                     fetcher.submit(clickedButtonRef.current || e.currentTarget);
                 else
-                    submit(clickedButtonRef.current || e.currentTarget);
+                    submit(clickedButtonRef.current || e.currentTarget, {
+                        method,
+                        replace,
+                    });
                 clickedButtonRef.current = null;
             }
         }, onReset: (event) => {

package/build/hooks.d.ts

@@ -1,5 +1,4 @@
 import { GetInputProps, ValidationBehaviorOptions } from "./internal/getInputProps";
-import { ValidationState } from "./types";
 export declare type FieldProps = {
     /**
      * The validation error message if there is one.
@@ -13,14 +12,6 @@ export declare type FieldProps = {
      * Validates the field.
      */
     validate: () => void;
-    /**
-     * The validation state of the field.
-     * - idle: the field has not been validated yet.
-     * - validating: the field is currently being validated.
-     * - valid: the field is valid.
-     * - invalid: the field is invalid.
-     */
-    validationState: ValidationState;
     /**
      * The default value of the field, if there is one.
      */

package/build/hooks.js

@@ -22,37 +22,24 @@ const useField = (name, options) => {
     const { fieldErrors, clearError, validateField, defaultValues, registerReceiveFocus, touchedFields, setFieldTouched, hasBeenSubmitted, } = useInternalFormContext("useField");
     const isTouched = !!touchedFields[name];
     const { handleReceiveFocus } = options !== null && options !== void 0 ? options : {};
-    const [isValidating, setValidating] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         if (handleReceiveFocus)
             return registerReceiveFocus(name, handleReceiveFocus);
     }, [handleReceiveFocus, name, registerReceiveFocus]);
     const field = (0, react_1.useMemo)(() => {
-        const error = fieldErrors[name];
-        const getValidationState = () => {
-            if (isValidating)
-                return "validating";
-            if (error)
-                return "invalid";
-            if (!isTouched && !hasBeenSubmitted)
-                return "idle";
-            return "valid";
-        };
         const helpers = {
-            error,
+            error: fieldErrors[name],
             clearError: () => {
                 clearError(name);
             },
             validate: () => {
-                setValidating(true);
-                validateField(name).then((error) => setValidating(false));
+                validateField(name);
             },
             defaultValue: defaultValues
                 ? (0, get_1.default)(defaultValues, (0, toPath_1.default)(name), undefined)
                 : undefined,
             touched: isTouched,
             setTouched: (touched) => setFieldTouched(name, touched),
-            validationState: getValidationState(),
         };
         const getInputProps = (0, getInputProps_1.createGetInputProps)({
             ...helpers,
@@ -71,7 +58,6 @@ const useField = (name, options) => {
         isTouched,
         hasBeenSubmitted,
         options === null || options === void 0 ? void 0 : options.validationBehavior,
-        isValidating,
         clearError,
         validateField,
         setFieldTouched,

package/build/server.d.ts

@@ -4,7 +4,7 @@ import { ValidatorError } from "./validation/types";
  * When you return this from your action, `ValidatedForm` on the frontend will automatically
  * display the errors on the correct fields on the correct form.
  *
- * _Recommended_: You can also provide a second argument to `validationError`
+ * You can also provide a second argument to `validationError`
  * to specify how to repopulate the form when JS is disabled.
  *
  * @example

package/build/server.js

@@ -7,7 +7,7 @@ const server_runtime_1 = require("@remix-run/server-runtime");
  * When you return this from your action, `ValidatedForm` on the frontend will automatically
  * display the errors on the correct fields on the correct form.
  *
- * _Recommended_: You can also provide a second argument to `validationError`
+ * You can also provide a second argument to `validationError`
  * to specify how to repopulate the form when JS is disabled.
  *
  * @example

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.1",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",

package/src/ValidatedForm.tsx

@@ -6,6 +6,7 @@ import {
   useSubmit,
   useTransition,
 } from "@remix-run/react";
+import { Fetcher } from "@remix-run/react/transition";
 import uniq from "lodash/uniq";
 import React, {
   ComponentProps,
@@ -106,22 +107,19 @@ function useFieldErrors(
 }
 
 const useIsSubmitting = (
-  action?: string,
-  subaction?: string,
-  fetcher?: ReturnType<typeof useFetcher>
-) => {
-  const actionForCurrentPage = useFormAction();
-  const pendingFormSubmit = useTransition().submission;
+  fetcher?: Fetcher
+): [boolean, () => void, () => void] => {
+  const [isSubmitStarted, setSubmitStarted] = useState(false);
+  const transition = useTransition();
+  const hasActiveSubmission = fetcher
+    ? fetcher.state === "submitting"
+    : !!transition.submission;
+  const isSubmitting = hasActiveSubmission && isSubmitStarted;
 
-  if (fetcher) return fetcher.state === "submitting";
-  if (!pendingFormSubmit) return false;
+  const startSubmit = () => setSubmitStarted(true);
+  const endSubmit = () => setSubmitStarted(false);
 
-  const { formData, action: pendingAction } = pendingFormSubmit;
-  const pendingSubAction = formData.get("subaction");
-  const expectedAction = action ?? actionForCurrentPage;
-  if (subaction)
-    return expectedAction === pendingAction && subaction === pendingSubAction;
-  return expectedAction === pendingAction && !pendingSubAction;
+  return [isSubmitting, startSubmit, endSubmit];
 };
 
 const getDataFromForm = (el: HTMLFormElement) => new FormData(el);
@@ -218,13 +216,16 @@ export function ValidatedForm<DataType>({
   subaction,
   resetAfterSubmit,
   disableFocusOnError,
+  method,
+  replace,
   ...rest
 }: FormProps<DataType>) {
   const backendError = useErrorResponseForThisForm(fetcher, subaction);
   const [fieldErrors, setFieldErrors] = useFieldErrors(
     backendError?.fieldErrors
   );
-  const isSubmitting = useIsSubmitting(action, subaction, fetcher);
+  const [isSubmitting, startSubmit, endSubmit] = useIsSubmitting(fetcher);
+
   const defaultsToUse = useDefaultValues(
     backendError?.repopulateFields,
     defaultValues
@@ -234,6 +235,7 @@ export function ValidatedForm<DataType>({
   const submit = useSubmit();
   const formRef = useRef<HTMLFormElement>(null);
   useSubmitComplete(isSubmitting, () => {
+    endSubmit();
     if (!backendError && resetAfterSubmit) {
       formRef.current?.reset();
     }
@@ -245,7 +247,7 @@ export function ValidatedForm<DataType>({
       fieldErrors,
       action,
       defaultValues: defaultsToUse,
-      isSubmitting: isSubmitting ?? false,
+      isSubmitting,
       isValid: Object.keys(fieldErrors).length === 0,
       touchedFields,
       setFieldTouched: (fieldName: string, touched: boolean) =>
@@ -336,13 +338,17 @@ export function ValidatedForm<DataType>({
       ref={mergeRefs([formRef, formRefProp])}
       {...rest}
       action={action}
+      method={method}
+      replace={replace}
       onSubmit={async (e) => {
         e.preventDefault();
         setHasBeenSubmitted(true);
+        startSubmit();
         const result = await validator.validate(
           getDataFromForm(e.currentTarget)
         );
         if (result.error) {
+          endSubmit();
           setFieldErrors(result.error.fieldErrors);
           if (!disableFocusOnError) {
             focusFirstInvalidInput(
@@ -355,7 +361,11 @@ export function ValidatedForm<DataType>({
           onSubmit && onSubmit(result.data, e);
           if (fetcher)
             fetcher.submit(clickedButtonRef.current || e.currentTarget);
-          else submit(clickedButtonRef.current || e.currentTarget);
+          else
+            submit(clickedButtonRef.current || e.currentTarget, {
+              method,
+              replace,
+            });
           clickedButtonRef.current = null;
         }
       }}

package/src/hooks.ts

@@ -1,13 +1,12 @@
 import get from "lodash/get";
 import toPath from "lodash/toPath";
-import { useContext, useEffect, useMemo, useState } from "react";
+import { useContext, useEffect, useMemo } from "react";
 import { FormContext } from "./internal/formContext";
 import {
   createGetInputProps,
   GetInputProps,
   ValidationBehaviorOptions,
 } from "./internal/getInputProps";
-import { ValidationState } from "./types";
 
 const useInternalFormContext = (hookName: string) => {
   const context = useContext(FormContext);
@@ -31,14 +30,6 @@ export type FieldProps = {
    * Validates the field.
    */
   validate: () => void;
-  /**
-   * The validation state of the field.
-   * - idle: the field has not been validated yet.
-   * - validating: the field is currently being validated.
-   * - valid: the field is valid.
-   * - invalid: the field is invalid.
-   */
-  validationState: ValidationState;
   /**
    * The default value of the field, if there is one.
    */
@@ -88,7 +79,6 @@ export const useField = (
 
   const isTouched = !!touchedFields[name];
   const { handleReceiveFocus } = options ?? {};
-  const [isValidating, setValidating] = useState(false);
 
   useEffect(() => {
     if (handleReceiveFocus)
@@ -96,28 +86,19 @@ export const useField = (
   }, [handleReceiveFocus, name, registerReceiveFocus]);
 
   const field = useMemo<FieldProps>(() => {
-    const error = fieldErrors[name];
-    const getValidationState = (): ValidationState => {
-      if (isValidating) return "validating";
-      if (error) return "invalid";
-      if (!isTouched && !hasBeenSubmitted) return "idle";
-      return "valid";
-    };
     const helpers = {
-      error,
+      error: fieldErrors[name],
       clearError: () => {
         clearError(name);
       },
       validate: () => {
-        setValidating(true);
-        validateField(name).then((error) => setValidating(false));
+        validateField(name);
       },
       defaultValue: defaultValues
         ? get(defaultValues, toPath(name), undefined)
         : undefined,
       touched: isTouched,
       setTouched: (touched: boolean) => setFieldTouched(name, touched),
-      validationState: getValidationState(),
     };
     const getInputProps = createGetInputProps({
       ...helpers,
@@ -136,7 +117,6 @@ export const useField = (
     isTouched,
     hasBeenSubmitted,
     options?.validationBehavior,
-    isValidating,
     clearError,
     validateField,
     setFieldTouched,

package/src/server.ts

@@ -9,7 +9,7 @@ import {
  * When you return this from your action, `ValidatedForm` on the frontend will automatically
  * display the errors on the correct fields on the correct form.
  *
- * _Recommended_: You can also provide a second argument to `validationError`
+ * You can also provide a second argument to `validationError`
  * to specify how to repopulate the form when JS is disabled.
  *
  * @example

package/src/types.ts

@@ -1 +0,0 @@
-export type ValidationState = "idle" | "validating" | "valid" | "invalid";