remix-validated-form 3.0.0 → 3.1.0

package/.turbo/turbo-build.log

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

package/browser/ValidatedForm.d.ts

@@ -38,8 +38,13 @@ export declare type FormProps<DataType> = {
      * and don't redirect in-between submissions.
      */
     resetAfterSubmit?: boolean;
+    /**
+     * Normally, the first invalid input will be focused when the validation fails on form submit.
+     * Set this to `false` to disable this behavior.
+     */
+    disableFocusOnError?: boolean;
 } & Omit<ComponentProps<typeof RemixForm>, "onSubmit">;
 /**
  * The primary form component of `remix-validated-form`.
  */
-export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, ...rest }: FormProps<DataType>): JSX.Element;
+export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, ...rest }: FormProps<DataType>): JSX.Element;

package/browser/ValidatedForm.js

@@ -3,6 +3,7 @@ import { Form as RemixForm, useActionData, useFormAction, useTransition, } from
 import { useEffect, useMemo, useRef, useState, } from "react";
 import invariant from "tiny-invariant";
 import { FormContext } from "./internal/formContext";
+import { useMultiValueMap, } from "./internal/SingleTypeMultiValueMap";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import { omit, mergeRefs } from "./internal/util";
 function useFieldErrorsFromBackend(fetcher, subaction) {
@@ -64,10 +65,32 @@ function useDefaultValues(fieldErrors, defaultValues) {
     const defaultsFromValidationError = fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors._submittedData;
     return defaultsFromValidationError !== null && defaultsFromValidationError !== void 0 ? defaultsFromValidationError : defaultValues;
 }
+const focusFirstInvalidInput = (fieldErrors, customFocusHandlers, formElement) => {
+    const invalidInputSelector = Object.keys(fieldErrors)
+        .map((fieldName) => `input[name="${fieldName}"]`)
+        .join(",");
+    const invalidInputs = formElement.querySelectorAll(invalidInputSelector);
+    for (const element of invalidInputs) {
+        const input = element;
+        if (customFocusHandlers.has(input.name)) {
+            customFocusHandlers.getAll(input.name).forEach((handler) => {
+                handler();
+            });
+            break;
+        }
+        // We don't filter these out ahead of time because
+        // they could have a custom focus handler
+        if (input.type === "hidden") {
+            continue;
+        }
+        input.focus();
+        break;
+    }
+};
 /**
  * The primary form component of `remix-validated-form`.
  */
-export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, ...rest }) {
+export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, ...rest }) {
     var _a;
     const fieldErrorsFromBackend = useFieldErrorsFromBackend(fetcher, subaction);
     const [fieldErrors, setFieldErrors] = useFieldErrors(fieldErrorsFromBackend);
@@ -80,11 +103,13 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
         }
     });
+    const customFocusHandlers = useMultiValueMap();
     const contextValue = useMemo(() => ({
         fieldErrors,
         action,
         defaultValues: defaultsToUse,
         isSubmitting: isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : false,
+        isValid: Object.keys(fieldErrors).length === 0,
         clearError: (fieldName) => {
             setFieldErrors((prev) => omit(prev, fieldName));
         },
@@ -98,6 +123,12 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
                 }));
             }
         },
+        registerReceiveFocus: (fieldName, handler) => {
+            customFocusHandlers().add(fieldName, handler);
+            return () => {
+                customFocusHandlers().remove(fieldName, handler);
+            };
+        },
     }), [
         fieldErrors,
         action,
@@ -105,6 +136,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
         isSubmitting,
         setFieldErrors,
         validator,
+        customFocusHandlers,
     ]);
     const Form = (_a = fetcher === null || fetcher === void 0 ? void 0 : fetcher.Form) !== null && _a !== void 0 ? _a : RemixForm;
     return (_jsx(Form, { ref: mergeRefs([formRef, formRefProp]), ...rest, action: action, onSubmit: (event) => {
@@ -112,6 +144,9 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             if (result.error) {
                 event.preventDefault();
                 setFieldErrors(result.error);
+                if (!disableFocusOnError) {
+                    focusFirstInvalidInput(result.error, customFocusHandlers(), formRef.current);
+                }
             }
             else {
                 onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(result.data, event);

package/browser/hooks.d.ts

@@ -19,7 +19,14 @@ export declare type FieldProps = {
 /**
  * Provides the data and helpers necessary to set up a field.
  */
-export declare const useField: (name: string) => FieldProps;
+export declare const useField: (name: string, options?: {
+    /**
+     * Allows you to configure a custom function that will be called
+     * when the input needs to receive focus due to a validation error.
+     * This is useful for custom components that use a hidden input.
+     */
+    handleReceiveFocus?: (() => void) | undefined;
+} | undefined) => FieldProps;
 /**
  * Provides access to the entire form context.
  * This is not usually necessary, but can be useful for advanced use cases.

package/browser/hooks.js

@@ -1,12 +1,17 @@
 import get from "lodash/get";
 import toPath from "lodash/toPath";
-import { useContext, useMemo } from "react";
+import { useContext, useEffect, useMemo } from "react";
 import { FormContext } from "./internal/formContext";
 /**
  * Provides the data and helpers necessary to set up a field.
  */
-export const useField = (name) => {
-    const { fieldErrors, clearError, validateField, defaultValues } = useContext(FormContext);
+export const useField = (name, options) => {
+    const { fieldErrors, clearError, validateField, defaultValues, registerReceiveFocus, } = useContext(FormContext);
+    const { handleReceiveFocus } = options !== null && options !== void 0 ? options : {};
+    useEffect(() => {
+        if (handleReceiveFocus)
+            return registerReceiveFocus(name, handleReceiveFocus);
+    }, [handleReceiveFocus, name, registerReceiveFocus]);
     const field = useMemo(() => ({
         error: fieldErrors[name],
         clearError: () => {

package/browser/internal/MultiValueMap.js

@@ -0,0 +1 @@
+"use strict";

package/browser/internal/SingleTypeMultiValueMap.d.ts

@@ -0,0 +1,8 @@
+export declare class MultiValueMap<Key, Value> {
+    private dict;
+    add: (key: Key, value: Value) => void;
+    remove: (key: Key, value: Value) => void;
+    getAll: (key: Key) => Value[];
+    has: (key: Key) => boolean;
+}
+export declare const useMultiValueMap: <Key, Value>() => () => MultiValueMap<Key, Value>;

package/browser/internal/SingleTypeMultiValueMap.js

@@ -0,0 +1,40 @@
+import { useRef } from "react";
+export class MultiValueMap {
+    constructor() {
+        this.dict = new Map();
+        this.add = (key, value) => {
+            var _a;
+            this.dict.set(key, [...((_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : []), value]);
+            if (this.dict.has(key)) {
+                this.dict.get(key).push(value);
+            }
+            else {
+                this.dict.set(key, [value]);
+            }
+        };
+        this.remove = (key, value) => {
+            if (!this.dict.has(key))
+                return;
+            const array = this.dict.get(key);
+            const index = array.indexOf(value);
+            if (index !== -1)
+                array.splice(index, 1);
+            if (array.length === 0)
+                this.dict.delete(key);
+        };
+        this.getAll = (key) => {
+            var _a;
+            return (_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : [];
+        };
+        this.has = (key) => this.dict.has(key);
+    }
+}
+export const useMultiValueMap = () => {
+    const ref = useRef(null);
+    return () => {
+        if (ref.current)
+            return ref.current;
+        ref.current = new MultiValueMap();
+        return ref.current;
+    };
+};

package/browser/internal/formContext.d.ts

@@ -21,11 +21,21 @@ export declare type FormContextValue = {
      * Whether or not the form is submitting.
      */
     isSubmitting: boolean;
+    /**
+     * Whether or not the form is valid.
+     * This is a shortcut for `Object.keys(fieldErrors).length === 0`.
+     */
+    isValid: boolean;
     /**
      * The default values of the form.
      */
     defaultValues?: {
         [fieldName: string]: any;
     };
+    /**
+     * Register a custom focus handler to be used when
+     * the field needs to receive focus due to a validation error.
+     */
+    registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
 };
 export declare const FormContext: import("react").Context<FormContextValue>;

package/browser/internal/formContext.js

@@ -4,4 +4,6 @@ export const FormContext = createContext({
     clearError: () => { },
     validateField: () => { },
     isSubmitting: false,
+    isValid: true,
+    registerReceiveFocus: () => () => { },
 });

package/browser/server.d.ts

@@ -4,4 +4,4 @@ import { FieldErrors } from "./validation/types";
  * The `ValidatedForm` on the frontend will automatically display the errors
  * if this is returned from the action.
  */
-export declare const validationError: (errors: FieldErrors) => Response;
+export declare const validationError: (errors: FieldErrors, submittedData?: unknown) => Response;

package/browser/server.js

@@ -4,4 +4,14 @@ import { json } from "@remix-run/server-runtime";
  * The `ValidatedForm` on the frontend will automatically display the errors
  * if this is returned from the action.
  */
-export const validationError = (errors) => json({ fieldErrors: errors }, { status: 422 });
+export const validationError = (errors, submittedData) => {
+    if (submittedData) {
+        return json({
+            fieldErrors: {
+                ...errors,
+                _submittedData: submittedData,
+            },
+        }, { status: 422 });
+    }
+    return json({ fieldErrors: errors }, { status: 422 });
+};

package/browser/validation/types.d.ts

@@ -28,3 +28,4 @@ export declare type Validator<DataType> = {
     validate: (unvalidatedData: GenericObject) => ValidationResult<DataType>;
     validateField: (unvalidatedData: GenericObject, field: string) => ValidateFieldResult;
 };
+export declare type ValidatorData<T extends Validator<any>> = T extends Validator<infer U> ? U : never;

package/build/ValidatedForm.d.ts

@@ -38,8 +38,13 @@ export declare type FormProps<DataType> = {
      * and don't redirect in-between submissions.
      */
     resetAfterSubmit?: boolean;
+    /**
+     * Normally, the first invalid input will be focused when the validation fails on form submit.
+     * Set this to `false` to disable this behavior.
+     */
+    disableFocusOnError?: boolean;
 } & Omit<ComponentProps<typeof RemixForm>, "onSubmit">;
 /**
  * The primary form component of `remix-validated-form`.
  */
-export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, ...rest }: FormProps<DataType>): JSX.Element;
+export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, ...rest }: FormProps<DataType>): JSX.Element;

package/build/ValidatedForm.js

@@ -9,6 +9,7 @@ const react_1 = require("@remix-run/react");
 const react_2 = require("react");
 const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
 const formContext_1 = require("./internal/formContext");
+const SingleTypeMultiValueMap_1 = require("./internal/SingleTypeMultiValueMap");
 const submissionCallbacks_1 = require("./internal/submissionCallbacks");
 const util_1 = require("./internal/util");
 function useFieldErrorsFromBackend(fetcher, subaction) {
@@ -70,10 +71,32 @@ function useDefaultValues(fieldErrors, defaultValues) {
     const defaultsFromValidationError = fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors._submittedData;
     return defaultsFromValidationError !== null && defaultsFromValidationError !== void 0 ? defaultsFromValidationError : defaultValues;
 }
+const focusFirstInvalidInput = (fieldErrors, customFocusHandlers, formElement) => {
+    const invalidInputSelector = Object.keys(fieldErrors)
+        .map((fieldName) => `input[name="${fieldName}"]`)
+        .join(",");
+    const invalidInputs = formElement.querySelectorAll(invalidInputSelector);
+    for (const element of invalidInputs) {
+        const input = element;
+        if (customFocusHandlers.has(input.name)) {
+            customFocusHandlers.getAll(input.name).forEach((handler) => {
+                handler();
+            });
+            break;
+        }
+        // We don't filter these out ahead of time because
+        // they could have a custom focus handler
+        if (input.type === "hidden") {
+            continue;
+        }
+        input.focus();
+        break;
+    }
+};
 /**
  * The primary form component of `remix-validated-form`.
  */
-function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, ...rest }) {
+function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, disableFocusOnError, ...rest }) {
     var _a;
     const fieldErrorsFromBackend = useFieldErrorsFromBackend(fetcher, subaction);
     const [fieldErrors, setFieldErrors] = useFieldErrors(fieldErrorsFromBackend);
@@ -86,11 +109,13 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
             (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
         }
     });
+    const customFocusHandlers = (0, SingleTypeMultiValueMap_1.useMultiValueMap)();
     const contextValue = (0, react_2.useMemo)(() => ({
         fieldErrors,
         action,
         defaultValues: defaultsToUse,
         isSubmitting: isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : false,
+        isValid: Object.keys(fieldErrors).length === 0,
         clearError: (fieldName) => {
             setFieldErrors((prev) => (0, util_1.omit)(prev, fieldName));
         },
@@ -104,6 +129,12 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
                 }));
             }
         },
+        registerReceiveFocus: (fieldName, handler) => {
+            customFocusHandlers().add(fieldName, handler);
+            return () => {
+                customFocusHandlers().remove(fieldName, handler);
+            };
+        },
     }), [
         fieldErrors,
         action,
@@ -111,6 +142,7 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
         isSubmitting,
         setFieldErrors,
         validator,
+        customFocusHandlers,
     ]);
     const Form = (_a = fetcher === null || fetcher === void 0 ? void 0 : fetcher.Form) !== null && _a !== void 0 ? _a : react_1.Form;
     return ((0, jsx_runtime_1.jsx)(Form, { ref: (0, util_1.mergeRefs)([formRef, formRefProp]), ...rest, action: action, onSubmit: (event) => {
@@ -118,6 +150,9 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
             if (result.error) {
                 event.preventDefault();
                 setFieldErrors(result.error);
+                if (!disableFocusOnError) {
+                    focusFirstInvalidInput(result.error, customFocusHandlers(), formRef.current);
+                }
             }
             else {
                 onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(result.data, event);

package/build/hooks.d.ts

@@ -19,7 +19,14 @@ export declare type FieldProps = {
 /**
  * Provides the data and helpers necessary to set up a field.
  */
-export declare const useField: (name: string) => FieldProps;
+export declare const useField: (name: string, options?: {
+    /**
+     * Allows you to configure a custom function that will be called
+     * when the input needs to receive focus due to a validation error.
+     * This is useful for custom components that use a hidden input.
+     */
+    handleReceiveFocus?: (() => void) | undefined;
+} | undefined) => FieldProps;
 /**
  * Provides access to the entire form context.
  * This is not usually necessary, but can be useful for advanced use cases.

package/build/hooks.js

@@ -11,8 +11,13 @@ const formContext_1 = require("./internal/formContext");
 /**
  * Provides the data and helpers necessary to set up a field.
  */
-const useField = (name) => {
-    const { fieldErrors, clearError, validateField, defaultValues } = (0, react_1.useContext)(formContext_1.FormContext);
+const useField = (name, options) => {
+    const { fieldErrors, clearError, validateField, defaultValues, registerReceiveFocus, } = (0, react_1.useContext)(formContext_1.FormContext);
+    const { handleReceiveFocus } = options !== null && options !== void 0 ? options : {};
+    (0, react_1.useEffect)(() => {
+        if (handleReceiveFocus)
+            return registerReceiveFocus(name, handleReceiveFocus);
+    }, [handleReceiveFocus, name, registerReceiveFocus]);
     const field = (0, react_1.useMemo)(() => ({
         error: fieldErrors[name],
         clearError: () => {

package/build/internal/SingleTypeMultiValueMap.d.ts

@@ -0,0 +1,8 @@
+export declare class MultiValueMap<Key, Value> {
+    private dict;
+    add: (key: Key, value: Value) => void;
+    remove: (key: Key, value: Value) => void;
+    getAll: (key: Key) => Value[];
+    has: (key: Key) => boolean;
+}
+export declare const useMultiValueMap: <Key, Value>() => () => MultiValueMap<Key, Value>;

package/build/internal/SingleTypeMultiValueMap.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMultiValueMap = exports.MultiValueMap = void 0;
+const react_1 = require("react");
+class MultiValueMap {
+    constructor() {
+        this.dict = new Map();
+        this.add = (key, value) => {
+            var _a;
+            this.dict.set(key, [...((_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : []), value]);
+            if (this.dict.has(key)) {
+                this.dict.get(key).push(value);
+            }
+            else {
+                this.dict.set(key, [value]);
+            }
+        };
+        this.remove = (key, value) => {
+            if (!this.dict.has(key))
+                return;
+            const array = this.dict.get(key);
+            const index = array.indexOf(value);
+            if (index !== -1)
+                array.splice(index, 1);
+            if (array.length === 0)
+                this.dict.delete(key);
+        };
+        this.getAll = (key) => {
+            var _a;
+            return (_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : [];
+        };
+        this.has = (key) => this.dict.has(key);
+    }
+}
+exports.MultiValueMap = MultiValueMap;
+const useMultiValueMap = () => {
+    const ref = (0, react_1.useRef)(null);
+    return () => {
+        if (ref.current)
+            return ref.current;
+        ref.current = new MultiValueMap();
+        return ref.current;
+    };
+};
+exports.useMultiValueMap = useMultiValueMap;

package/build/internal/formContext.d.ts

@@ -21,11 +21,21 @@ export declare type FormContextValue = {
      * Whether or not the form is submitting.
      */
     isSubmitting: boolean;
+    /**
+     * Whether or not the form is valid.
+     * This is a shortcut for `Object.keys(fieldErrors).length === 0`.
+     */
+    isValid: boolean;
     /**
      * The default values of the form.
      */
     defaultValues?: {
         [fieldName: string]: any;
     };
+    /**
+     * Register a custom focus handler to be used when
+     * the field needs to receive focus due to a validation error.
+     */
+    registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
 };
 export declare const FormContext: import("react").Context<FormContextValue>;

package/build/internal/formContext.js

@@ -7,4 +7,6 @@ exports.FormContext = (0, react_1.createContext)({
     clearError: () => { },
     validateField: () => { },
     isSubmitting: false,
+    isValid: true,
+    registerReceiveFocus: () => () => { },
 });

package/build/server.d.ts

@@ -4,4 +4,4 @@ import { FieldErrors } from "./validation/types";
  * The `ValidatedForm` on the frontend will automatically display the errors
  * if this is returned from the action.
  */
-export declare const validationError: (errors: FieldErrors) => Response;
+export declare const validationError: (errors: FieldErrors, submittedData?: unknown) => Response;

package/build/server.js

@@ -7,5 +7,15 @@ const server_runtime_1 = require("@remix-run/server-runtime");
  * The `ValidatedForm` on the frontend will automatically display the errors
  * if this is returned from the action.
  */
-const validationError = (errors) => (0, server_runtime_1.json)({ fieldErrors: errors }, { status: 422 });
+const validationError = (errors, submittedData) => {
+    if (submittedData) {
+        return (0, server_runtime_1.json)({
+            fieldErrors: {
+                ...errors,
+                _submittedData: submittedData,
+            },
+        }, { status: 422 });
+    }
+    return (0, server_runtime_1.json)({ fieldErrors: errors }, { status: 422 });
+};
 exports.validationError = validationError;

package/build/validation/types.d.ts

@@ -28,3 +28,4 @@ export declare type Validator<DataType> = {
     validate: (unvalidatedData: GenericObject) => ValidationResult<DataType>;
     validateField: (unvalidatedData: GenericObject, field: string) => ValidateFieldResult;
 };
+export declare type ValidatorData<T extends Validator<any>> = T extends Validator<infer U> ? U : never;

package/package.json

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

package/src/ValidatedForm.tsx

@@ -14,6 +14,10 @@ import React, {
 } from "react";
 import invariant from "tiny-invariant";
 import { FormContext, FormContextValue } from "./internal/formContext";
+import {
+  MultiValueMap,
+  useMultiValueMap,
+} from "./internal/SingleTypeMultiValueMap";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import { omit, mergeRefs } from "./internal/util";
 import {
@@ -59,6 +63,11 @@ export type FormProps<DataType> = {
    * and don't redirect in-between submissions.
    */
   resetAfterSubmit?: boolean;
+  /**
+   * Normally, the first invalid input will be focused when the validation fails on form submit.
+   * Set this to `false` to disable this behavior.
+   */
+  disableFocusOnError?: boolean;
 } & Omit<ComponentProps<typeof RemixForm>, "onSubmit">;
 
 function useFieldErrorsFromBackend(
@@ -136,6 +145,36 @@ function useDefaultValues<DataType>(
   return defaultsFromValidationError ?? defaultValues;
 }
 
+const focusFirstInvalidInput = (
+  fieldErrors: FieldErrors,
+  customFocusHandlers: MultiValueMap<string, () => void>,
+  formElement: HTMLFormElement
+) => {
+  const invalidInputSelector = Object.keys(fieldErrors)
+    .map((fieldName) => `input[name="${fieldName}"]`)
+    .join(",");
+  const invalidInputs = formElement.querySelectorAll(invalidInputSelector);
+  for (const element of invalidInputs) {
+    const input = element as HTMLInputElement;
+
+    if (customFocusHandlers.has(input.name)) {
+      customFocusHandlers.getAll(input.name).forEach((handler) => {
+        handler();
+      });
+      break;
+    }
+
+    // We don't filter these out ahead of time because
+    // they could have a custom focus handler
+    if (input.type === "hidden") {
+      continue;
+    }
+
+    input.focus();
+    break;
+  }
+};
+
 /**
  * The primary form component of `remix-validated-form`.
  */
@@ -150,6 +189,7 @@ export function ValidatedForm<DataType>({
   onReset,
   subaction,
   resetAfterSubmit,
+  disableFocusOnError,
   ...rest
 }: FormProps<DataType>) {
   const fieldErrorsFromBackend = useFieldErrorsFromBackend(fetcher, subaction);
@@ -162,6 +202,7 @@ export function ValidatedForm<DataType>({
       formRef.current?.reset();
     }
   });
+  const customFocusHandlers = useMultiValueMap<string, () => void>();
 
   const contextValue = useMemo<FormContextValue>(
     () => ({
@@ -169,6 +210,7 @@ export function ValidatedForm<DataType>({
       action,
       defaultValues: defaultsToUse,
       isSubmitting: isSubmitting ?? false,
+      isValid: Object.keys(fieldErrors).length === 0,
       clearError: (fieldName) => {
         setFieldErrors((prev) => omit(prev, fieldName));
       },
@@ -185,6 +227,12 @@ export function ValidatedForm<DataType>({
           }));
         }
       },
+      registerReceiveFocus: (fieldName, handler) => {
+        customFocusHandlers().add(fieldName, handler);
+        return () => {
+          customFocusHandlers().remove(fieldName, handler);
+        };
+      },
     }),
     [
       fieldErrors,
@@ -193,6 +241,7 @@ export function ValidatedForm<DataType>({
       isSubmitting,
       setFieldErrors,
       validator,
+      customFocusHandlers,
     ]
   );
 
@@ -208,6 +257,13 @@ export function ValidatedForm<DataType>({
         if (result.error) {
           event.preventDefault();
           setFieldErrors(result.error);
+          if (!disableFocusOnError) {
+            focusFirstInvalidInput(
+              result.error,
+              customFocusHandlers(),
+              formRef.current!
+            );
+          }
         } else {
           onSubmit?.(result.data, event);
         }

package/src/hooks.ts

@@ -1,6 +1,6 @@
 import get from "lodash/get";
 import toPath from "lodash/toPath";
-import { useContext, useMemo } from "react";
+import { useContext, useEffect, useMemo } from "react";
 import { FormContext } from "./internal/formContext";
 
 export type FieldProps = {
@@ -25,9 +25,31 @@ export type FieldProps = {
 /**
  * Provides the data and helpers necessary to set up a field.
  */
-export const useField = (name: string): FieldProps => {
-  const { fieldErrors, clearError, validateField, defaultValues } =
-    useContext(FormContext);
+export const useField = (
+  name: string,
+  options?: {
+    /**
+     * Allows you to configure a custom function that will be called
+     * when the input needs to receive focus due to a validation error.
+     * This is useful for custom components that use a hidden input.
+     */
+    handleReceiveFocus?: () => void;
+  }
+): FieldProps => {
+  const {
+    fieldErrors,
+    clearError,
+    validateField,
+    defaultValues,
+    registerReceiveFocus,
+  } = useContext(FormContext);
+
+  const { handleReceiveFocus } = options ?? {};
+
+  useEffect(() => {
+    if (handleReceiveFocus)
+      return registerReceiveFocus(name, handleReceiveFocus);
+  }, [handleReceiveFocus, name, registerReceiveFocus]);
 
   const field = useMemo<FieldProps>(
     () => ({

package/src/internal/SingleTypeMultiValueMap.ts

@@ -0,0 +1,37 @@
+import { useRef } from "react";
+
+export class MultiValueMap<Key, Value> {
+  private dict: Map<Key, Value[]> = new Map();
+
+  add = (key: Key, value: Value) => {
+    this.dict.set(key, [...(this.dict.get(key) ?? []), value]);
+    if (this.dict.has(key)) {
+      this.dict.get(key)!.push(value);
+    } else {
+      this.dict.set(key, [value]);
+    }
+  };
+
+  remove = (key: Key, value: Value) => {
+    if (!this.dict.has(key)) return;
+    const array = this.dict.get(key)!;
+    const index = array.indexOf(value);
+    if (index !== -1) array.splice(index, 1);
+    if (array.length === 0) this.dict.delete(key);
+  };
+
+  getAll = (key: Key): Value[] => {
+    return this.dict.get(key) ?? [];
+  };
+
+  has = (key: Key): boolean => this.dict.has(key);
+}
+
+export const useMultiValueMap = <Key, Value>() => {
+  const ref = useRef<MultiValueMap<Key, Value> | null>(null);
+  return () => {
+    if (ref.current) return ref.current;
+    ref.current = new MultiValueMap();
+    return ref.current;
+  };
+};

package/src/internal/formContext.ts

@@ -22,10 +22,20 @@ export type FormContextValue = {
    * Whether or not the form is submitting.
    */
   isSubmitting: boolean;
+  /**
+   * Whether or not the form is valid.
+   * This is a shortcut for `Object.keys(fieldErrors).length === 0`.
+   */
+  isValid: boolean;
   /**
    * The default values of the form.
    */
   defaultValues?: { [fieldName: string]: any };
+  /**
+   * Register a custom focus handler to be used when
+   * the field needs to receive focus due to a validation error.
+   */
+  registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
 };
 
 export const FormContext = createContext<FormContextValue>({
@@ -33,4 +43,6 @@ export const FormContext = createContext<FormContextValue>({
   clearError: () => {},
   validateField: () => {},
   isSubmitting: false,
+  isValid: true,
+  registerReceiveFocus: () => () => {},
 });

package/src/server.ts

@@ -6,5 +6,21 @@ import { FieldErrors } from "./validation/types";
  * The `ValidatedForm` on the frontend will automatically display the errors
  * if this is returned from the action.
  */
-export const validationError = (errors: FieldErrors) =>
-  json({ fieldErrors: errors }, { status: 422 });
+export const validationError = (
+  errors: FieldErrors,
+  submittedData?: unknown
+) => {
+  if (submittedData) {
+    return json(
+      {
+        fieldErrors: {
+          ...errors,
+          _submittedData: submittedData,
+        },
+      },
+      { status: 422 }
+    );
+  }
+
+  return json({ fieldErrors: errors }, { status: 422 });
+};

package/src/validation/types.ts

@@ -26,3 +26,9 @@ export type Validator<DataType> = {
     field: string
   ) => ValidateFieldResult;
 };
+
+export type ValidatorData<T extends Validator<any>> = T extends Validator<
+  infer U
+>
+  ? U
+  : never;