remix-validated-form 3.1.1 → 3.3.0

package/.turbo/turbo-build.log

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

package/README.md

@@ -64,18 +64,14 @@ type MyInputProps = {
 };
 
 export const MyInput = ({ name, label }: InputProps) => {
-  const { validate, clearError, defaultValue, error } = useField(name);
+  const { error, getInputProps } = useField(name);
   return (
     <div>
       <label htmlFor={name}>{label}</label>
-      <input
-        id={name}
-        name={name}
-        onBlur={validate}
-        onChange={clearError}
-        defaultValue={defaultValue}
-      />
-      {error && <span className="my-error-class">{error}</span>}
+      <input {...getInputProps({ id: name })} />
+      {error && (
+        <span className="my-error-class">{error}</span>
+      )}
     </div>
   );
 };
@@ -257,4 +253,8 @@ We recommend this approach since the validation will still work even if JS is di
 ## How do we trigger toast messages on success?
 
 Problem: how do we trigger a toast message on success if the action redirects away from the form route? The Remix solution is to flash a message in the session and pick this up in a loader function, probably in root.tsx
-See the [Remix](https://remix.run/docs/en/v1/api/remix#sessionflashkey-value) documentation for more information.
+See the [Remix](https://remix.run/docs/en/v1/api/remix#sessionflashkey-value) documentation for more information.
+
+## Why is my cancel button triggering form submission?
+Problem: the cancel button has an onClick handler to navigate away from the form route but instead it is submitting the form.
+A button defaults to `type="submit"` in a form which will submit the form by default. If you want to prevent this you can add `type="reset"` or `type="button"` to the cancel button.

package/browser/ValidatedForm.js

@@ -3,7 +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 { useMultiValueMap } from "./internal/MultiValueMap";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import { omit, mergeRefs } from "./internal/util";
 function useFieldErrorsFromBackend(fetcher, subaction) {
@@ -96,6 +96,8 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
     const [fieldErrors, setFieldErrors] = useFieldErrors(fieldErrorsFromBackend);
     const isSubmitting = useIsSubmitting(action, subaction, fetcher);
     const defaultsToUse = useDefaultValues(fieldErrorsFromBackend, defaultValues);
+    const [touchedFields, setTouchedFields] = useState({});
+    const [hasBeenSubmitted, setHasBeenSubmitted] = useState(false);
     const formRef = useRef(null);
     useSubmitComplete(isSubmitting, () => {
         var _a;
@@ -110,17 +112,35 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
         defaultValues: defaultsToUse,
         isSubmitting: isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : false,
         isValid: Object.keys(fieldErrors).length === 0,
+        touchedFields,
+        setFieldTouched: (fieldName, touched) => setTouchedFields((prev) => ({
+            ...prev,
+            [fieldName]: touched,
+        })),
         clearError: (fieldName) => {
             setFieldErrors((prev) => omit(prev, fieldName));
         },
         validateField: (fieldName) => {
             invariant(formRef.current, "Cannot find reference to form");
             const { error } = validator.validateField(getDataFromForm(formRef.current), fieldName);
+            // By checking and returning `prev` here, we can avoid a re-render
+            // if the validation state is the same.
             if (error) {
-                setFieldErrors((prev) => ({
-                    ...prev,
-                    [fieldName]: error,
-                }));
+                setFieldErrors((prev) => {
+                    if (prev[fieldName] === error)
+                        return prev;
+                    return {
+                        ...prev,
+                        [fieldName]: error,
+                    };
+                });
+            }
+            else {
+                setFieldErrors((prev) => {
+                    if (!(fieldName in prev))
+                        return prev;
+                    return omit(prev, fieldName);
+                });
             }
         },
         registerReceiveFocus: (fieldName, handler) => {
@@ -129,17 +149,21 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
                 customFocusHandlers().remove(fieldName, handler);
             };
         },
+        hasBeenSubmitted,
     }), [
         fieldErrors,
         action,
         defaultsToUse,
         isSubmitting,
+        touchedFields,
+        hasBeenSubmitted,
         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) => {
+            setHasBeenSubmitted(true);
             const result = validator.validate(getDataFromForm(event.currentTarget));
             if (result.error) {
                 event.preventDefault();
@@ -156,5 +180,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             if (event.defaultPrevented)
                 return;
             setFieldErrors({});
+            setTouchedFields({});
+            setHasBeenSubmitted(false);
         }, children: _jsxs(FormContext.Provider, { value: contextValue, children: [subaction && (_jsx("input", { type: "hidden", value: subaction, name: "subaction" }, void 0)), children] }, void 0) }, void 0));
 }

package/browser/hooks.d.ts

@@ -1,3 +1,4 @@
+import { GetInputProps, ValidationBehaviorOptions } from "./internal/getInputProps";
 export declare type FieldProps = {
     /**
      * The validation error message if there is one.
@@ -15,6 +16,18 @@ export declare type FieldProps = {
      * The default value of the field, if there is one.
      */
     defaultValue?: any;
+    /**
+     * Whether or not the field has been touched.
+     */
+    touched: boolean;
+    /**
+     * Helper to set the touched state of the field.
+     */
+    setTouched: (touched: boolean) => void;
+    /**
+     * Helper to get all the props necessary for a regular input.
+     */
+    getInputProps: GetInputProps;
 };
 /**
  * Provides the data and helpers necessary to set up a field.
@@ -26,6 +39,10 @@ export declare const useField: (name: string, options?: {
      * This is useful for custom components that use a hidden input.
      */
     handleReceiveFocus?: (() => void) | undefined;
+    /**
+     * Allows you to specify when a field gets validated (when using getInputProps)
+     */
+    validationBehavior?: Partial<ValidationBehaviorOptions> | undefined;
 } | undefined) => FieldProps;
 /**
  * Provides access to the entire form context.

package/browser/hooks.js

@@ -2,26 +2,52 @@ import get from "lodash/get";
 import toPath from "lodash/toPath";
 import { useContext, useEffect, useMemo } from "react";
 import { FormContext } from "./internal/formContext";
+import { createGetInputProps, } from "./internal/getInputProps";
 /**
  * Provides the data and helpers necessary to set up a field.
  */
 export const useField = (name, options) => {
-    const { fieldErrors, clearError, validateField, defaultValues, registerReceiveFocus, } = useContext(FormContext);
+    const { fieldErrors, clearError, validateField, defaultValues, registerReceiveFocus, touchedFields, setFieldTouched, hasBeenSubmitted, } = useContext(FormContext);
+    const isTouched = !!touchedFields[name];
     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: () => {
-            clearError(name);
-        },
-        validate: () => validateField(name),
-        defaultValue: defaultValues
-            ? get(defaultValues, toPath(name), undefined)
-            : undefined,
-    }), [clearError, defaultValues, fieldErrors, name, validateField]);
+    const field = useMemo(() => {
+        const helpers = {
+            error: fieldErrors[name],
+            clearError: () => {
+                clearError(name);
+            },
+            validate: () => validateField(name),
+            defaultValue: defaultValues
+                ? get(defaultValues, toPath(name), undefined)
+                : undefined,
+            touched: isTouched,
+            setTouched: (touched) => setFieldTouched(name, touched),
+        };
+        const getInputProps = createGetInputProps({
+            ...helpers,
+            name,
+            hasBeenSubmitted,
+            validationBehavior: options === null || options === void 0 ? void 0 : options.validationBehavior,
+        });
+        return {
+            ...helpers,
+            getInputProps,
+        };
+    }, [
+        fieldErrors,
+        name,
+        defaultValues,
+        isTouched,
+        hasBeenSubmitted,
+        options === null || options === void 0 ? void 0 : options.validationBehavior,
+        clearError,
+        validateField,
+        setFieldTouched,
+    ]);
     return field;
 };
 /**

package/browser/internal/MultiValueMap.d.ts

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

package/browser/internal/MultiValueMap.js

@@ -1 +1,39 @@
-"use strict";
+import { useRef } from "react";
+export class MultiValueMap {
+    constructor() {
+        this.dict = new Map();
+        this.add = (key, 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.entries = () => this.dict.entries();
+        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/SingleTypeMultiValueMap.d.ts

@@ -3,6 +3,7 @@ export declare class MultiValueMap<Key, Value> {
     add: (key: Key, value: Value) => void;
     remove: (key: Key, value: Value) => void;
     getAll: (key: Key) => Value[];
+    entries: () => IterableIterator<[Key, Value[]]>;
     has: (key: Key) => boolean;
 }
 export declare const useMultiValueMap: <Key, Value>() => () => MultiValueMap<Key, Value>;

package/browser/internal/SingleTypeMultiValueMap.js

@@ -26,6 +26,7 @@ export class MultiValueMap {
             var _a;
             return (_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : [];
         };
+        this.entries = () => this.dict.entries();
         this.has = (key) => this.dict.has(key);
     }
 }

package/browser/internal/flatten.js

@@ -6,7 +6,12 @@ import keys from "lodash/keys";
 import mapKeys from "lodash/mapKeys";
 import set from "lodash/set";
 import transform from "lodash/transform";
-export const objectFromPathEntries = (entries) => entries.reduce((acc, [key, value]) => set(acc, key, value), {});
+import { MultiValueMap } from "./MultiValueMap";
+export const objectFromPathEntries = (entries) => {
+    const map = new MultiValueMap();
+    entries.forEach(([key, value]) => map.add(key, value));
+    return [...map.entries()].reduce((acc, [key, value]) => set(acc, key, value.length === 1 ? value[0] : value), {});
+};
 /** Flatten an object so there are no nested objects or arrays */
 export function flatten(obj, preserveEmpty = false) {
     return transform(obj, function (result, value, key) {

package/browser/internal/formContext.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FieldErrors } from "../validation/types";
+import { FieldErrors, TouchedFields } from "../validation/types";
 export declare type FormContextValue = {
     /**
      * All the errors in all the fields in the form.
@@ -21,6 +21,12 @@ export declare type FormContextValue = {
      * Whether or not the form is submitting.
      */
     isSubmitting: boolean;
+    /**
+     * Whether or not a submission has been attempted.
+     * This is true once the form has been submitted, even if there were validation errors.
+     * Resets to false when the form is reset.
+     */
+    hasBeenSubmitted: boolean;
     /**
      * Whether or not the form is valid.
      * This is a shortcut for `Object.keys(fieldErrors).length === 0`.
@@ -37,5 +43,13 @@ export declare type FormContextValue = {
      * the field needs to receive focus due to a validation error.
      */
     registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
+    /**
+     * Any fields that have been touched by the user.
+     */
+    touchedFields: TouchedFields;
+    /**
+     * Change the touched state of the specified field.
+     */
+    setFieldTouched: (fieldName: string, touched: boolean) => void;
 };
 export declare const FormContext: import("react").Context<FormContextValue>;

package/browser/internal/formContext.js

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

package/browser/internal/getInputProps.d.ts

@@ -0,0 +1,21 @@
+export declare type ValidationBehavior = "onBlur" | "onChange" | "onSubmit";
+export declare type ValidationBehaviorOptions = {
+    initial: ValidationBehavior;
+    whenTouched: ValidationBehavior;
+    whenSubmitted: ValidationBehavior;
+};
+export declare type CreateGetInputPropsOptions = {
+    clearError: () => void;
+    validate: () => void;
+    defaultValue?: any;
+    touched: boolean;
+    setTouched: (touched: boolean) => void;
+    hasBeenSubmitted: boolean;
+    validationBehavior?: Partial<ValidationBehaviorOptions>;
+    name: string;
+};
+declare type HandledProps = "name" | "defaultValue";
+declare type Callbacks = "onChange" | "onBlur";
+export declare type GetInputProps = <T extends Record<string, any>>(props?: Omit<T, HandledProps | Callbacks> & Partial<Pick<T, Callbacks>>) => T;
+export declare const createGetInputProps: ({ clearError, validate, defaultValue, touched, setTouched, hasBeenSubmitted, validationBehavior, name, }: CreateGetInputPropsOptions) => GetInputProps;
+export {};

package/browser/internal/getInputProps.js

@@ -0,0 +1,39 @@
+const defaultValidationBehavior = {
+    initial: "onBlur",
+    whenTouched: "onChange",
+    whenSubmitted: "onChange",
+};
+export const createGetInputProps = ({ clearError, validate, defaultValue, touched, setTouched, hasBeenSubmitted, validationBehavior, name, }) => {
+    const validationBehaviors = {
+        ...defaultValidationBehavior,
+        ...validationBehavior,
+    };
+    return (props = {}) => {
+        const behavior = hasBeenSubmitted
+            ? validationBehaviors.whenSubmitted
+            : touched
+                ? validationBehaviors.whenTouched
+                : validationBehaviors.initial;
+        const result = {
+            ...props,
+            onChange: (...args) => {
+                var _a;
+                if (behavior === "onChange")
+                    validate();
+                else
+                    clearError();
+                return (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, ...args);
+            },
+            onBlur: (...args) => {
+                var _a;
+                if (behavior === "onBlur")
+                    validate();
+                setTouched(true);
+                return (_a = props === null || props === void 0 ? void 0 : props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, ...args);
+            },
+            defaultValue,
+            name,
+        };
+        return result;
+    };
+};

package/browser/internal/test.js

@@ -0,0 +1,15 @@
+"use strict";
+z.preprocess((val) => {
+    // Somewhat awkward -- this gets processed per item in the form,
+    // but as a whole array in the backend
+    if (Array.isArray(val)) {
+        return val;
+    }
+    else {
+        return [val];
+    }
+}, z.array(z.preprocess((val) => {
+    return typeof val !== "string" || val === ""
+        ? undefined
+        : Number.parseInt(val);
+}, z.number())));

package/browser/validation/types.d.ts

@@ -1,4 +1,5 @@
 export declare type FieldErrors = Record<string, string>;
+export declare type TouchedFields = Record<string, boolean>;
 export declare type FieldErrorsWithData = FieldErrors & {
     _submittedData: any;
 };

package/build/ValidatedForm.js

@@ -9,7 +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 MultiValueMap_1 = require("./internal/MultiValueMap");
 const submissionCallbacks_1 = require("./internal/submissionCallbacks");
 const util_1 = require("./internal/util");
 function useFieldErrorsFromBackend(fetcher, subaction) {
@@ -102,6 +102,8 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
     const [fieldErrors, setFieldErrors] = useFieldErrors(fieldErrorsFromBackend);
     const isSubmitting = useIsSubmitting(action, subaction, fetcher);
     const defaultsToUse = useDefaultValues(fieldErrorsFromBackend, defaultValues);
+    const [touchedFields, setTouchedFields] = (0, react_2.useState)({});
+    const [hasBeenSubmitted, setHasBeenSubmitted] = (0, react_2.useState)(false);
     const formRef = (0, react_2.useRef)(null);
     (0, submissionCallbacks_1.useSubmitComplete)(isSubmitting, () => {
         var _a;
@@ -109,24 +111,42 @@ 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 customFocusHandlers = (0, MultiValueMap_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,
+        touchedFields,
+        setFieldTouched: (fieldName, touched) => setTouchedFields((prev) => ({
+            ...prev,
+            [fieldName]: touched,
+        })),
         clearError: (fieldName) => {
             setFieldErrors((prev) => (0, util_1.omit)(prev, fieldName));
         },
         validateField: (fieldName) => {
             (0, tiny_invariant_1.default)(formRef.current, "Cannot find reference to form");
             const { error } = validator.validateField(getDataFromForm(formRef.current), fieldName);
+            // By checking and returning `prev` here, we can avoid a re-render
+            // if the validation state is the same.
             if (error) {
-                setFieldErrors((prev) => ({
-                    ...prev,
-                    [fieldName]: error,
-                }));
+                setFieldErrors((prev) => {
+                    if (prev[fieldName] === error)
+                        return prev;
+                    return {
+                        ...prev,
+                        [fieldName]: error,
+                    };
+                });
+            }
+            else {
+                setFieldErrors((prev) => {
+                    if (!(fieldName in prev))
+                        return prev;
+                    return (0, util_1.omit)(prev, fieldName);
+                });
             }
         },
         registerReceiveFocus: (fieldName, handler) => {
@@ -135,17 +155,21 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
                 customFocusHandlers().remove(fieldName, handler);
             };
         },
+        hasBeenSubmitted,
     }), [
         fieldErrors,
         action,
         defaultsToUse,
         isSubmitting,
+        touchedFields,
+        hasBeenSubmitted,
         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) => {
+            setHasBeenSubmitted(true);
             const result = validator.validate(getDataFromForm(event.currentTarget));
             if (result.error) {
                 event.preventDefault();
@@ -162,6 +186,8 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
             if (event.defaultPrevented)
                 return;
             setFieldErrors({});
+            setTouchedFields({});
+            setHasBeenSubmitted(false);
         }, children: (0, jsx_runtime_1.jsxs)(formContext_1.FormContext.Provider, { value: contextValue, children: [subaction && ((0, jsx_runtime_1.jsx)("input", { type: "hidden", value: subaction, name: "subaction" }, void 0)), children] }, void 0) }, void 0));
 }
 exports.ValidatedForm = ValidatedForm;

package/build/hooks.d.ts

@@ -1,3 +1,4 @@
+import { GetInputProps, ValidationBehaviorOptions } from "./internal/getInputProps";
 export declare type FieldProps = {
     /**
      * The validation error message if there is one.
@@ -15,6 +16,18 @@ export declare type FieldProps = {
      * The default value of the field, if there is one.
      */
     defaultValue?: any;
+    /**
+     * Whether or not the field has been touched.
+     */
+    touched: boolean;
+    /**
+     * Helper to set the touched state of the field.
+     */
+    setTouched: (touched: boolean) => void;
+    /**
+     * Helper to get all the props necessary for a regular input.
+     */
+    getInputProps: GetInputProps;
 };
 /**
  * Provides the data and helpers necessary to set up a field.
@@ -26,6 +39,10 @@ export declare const useField: (name: string, options?: {
      * This is useful for custom components that use a hidden input.
      */
     handleReceiveFocus?: (() => void) | undefined;
+    /**
+     * Allows you to specify when a field gets validated (when using getInputProps)
+     */
+    validationBehavior?: Partial<ValidationBehaviorOptions> | undefined;
 } | undefined) => FieldProps;
 /**
  * Provides access to the entire form context.

package/build/hooks.js

@@ -8,26 +8,52 @@ const get_1 = __importDefault(require("lodash/get"));
 const toPath_1 = __importDefault(require("lodash/toPath"));
 const react_1 = require("react");
 const formContext_1 = require("./internal/formContext");
+const getInputProps_1 = require("./internal/getInputProps");
 /**
  * Provides the data and helpers necessary to set up a field.
  */
 const useField = (name, options) => {
-    const { fieldErrors, clearError, validateField, defaultValues, registerReceiveFocus, } = (0, react_1.useContext)(formContext_1.FormContext);
+    const { fieldErrors, clearError, validateField, defaultValues, registerReceiveFocus, touchedFields, setFieldTouched, hasBeenSubmitted, } = (0, react_1.useContext)(formContext_1.FormContext);
+    const isTouched = !!touchedFields[name];
     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: () => {
-            clearError(name);
-        },
-        validate: () => validateField(name),
-        defaultValue: defaultValues
-            ? (0, get_1.default)(defaultValues, (0, toPath_1.default)(name), undefined)
-            : undefined,
-    }), [clearError, defaultValues, fieldErrors, name, validateField]);
+    const field = (0, react_1.useMemo)(() => {
+        const helpers = {
+            error: fieldErrors[name],
+            clearError: () => {
+                clearError(name);
+            },
+            validate: () => validateField(name),
+            defaultValue: defaultValues
+                ? (0, get_1.default)(defaultValues, (0, toPath_1.default)(name), undefined)
+                : undefined,
+            touched: isTouched,
+            setTouched: (touched) => setFieldTouched(name, touched),
+        };
+        const getInputProps = (0, getInputProps_1.createGetInputProps)({
+            ...helpers,
+            name,
+            hasBeenSubmitted,
+            validationBehavior: options === null || options === void 0 ? void 0 : options.validationBehavior,
+        });
+        return {
+            ...helpers,
+            getInputProps,
+        };
+    }, [
+        fieldErrors,
+        name,
+        defaultValues,
+        isTouched,
+        hasBeenSubmitted,
+        options === null || options === void 0 ? void 0 : options.validationBehavior,
+        clearError,
+        validateField,
+        setFieldTouched,
+    ]);
     return field;
 };
 exports.useField = useField;

package/build/internal/MultiValueMap.d.ts

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

package/build/internal/MultiValueMap.js

@@ -0,0 +1,44 @@
+"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) => {
+            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.entries = () => this.dict.entries();
+        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/flatten.js

@@ -12,7 +12,12 @@ const keys_1 = __importDefault(require("lodash/keys"));
 const mapKeys_1 = __importDefault(require("lodash/mapKeys"));
 const set_1 = __importDefault(require("lodash/set"));
 const transform_1 = __importDefault(require("lodash/transform"));
-const objectFromPathEntries = (entries) => entries.reduce((acc, [key, value]) => (0, set_1.default)(acc, key, value), {});
+const MultiValueMap_1 = require("./MultiValueMap");
+const objectFromPathEntries = (entries) => {
+    const map = new MultiValueMap_1.MultiValueMap();
+    entries.forEach(([key, value]) => map.add(key, value));
+    return [...map.entries()].reduce((acc, [key, value]) => (0, set_1.default)(acc, key, value.length === 1 ? value[0] : value), {});
+};
 exports.objectFromPathEntries = objectFromPathEntries;
 /** Flatten an object so there are no nested objects or arrays */
 function flatten(obj, preserveEmpty = false) {

package/build/internal/formContext.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FieldErrors } from "../validation/types";
+import { FieldErrors, TouchedFields } from "../validation/types";
 export declare type FormContextValue = {
     /**
      * All the errors in all the fields in the form.
@@ -21,6 +21,12 @@ export declare type FormContextValue = {
      * Whether or not the form is submitting.
      */
     isSubmitting: boolean;
+    /**
+     * Whether or not a submission has been attempted.
+     * This is true once the form has been submitted, even if there were validation errors.
+     * Resets to false when the form is reset.
+     */
+    hasBeenSubmitted: boolean;
     /**
      * Whether or not the form is valid.
      * This is a shortcut for `Object.keys(fieldErrors).length === 0`.
@@ -37,5 +43,13 @@ export declare type FormContextValue = {
      * the field needs to receive focus due to a validation error.
      */
     registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
+    /**
+     * Any fields that have been touched by the user.
+     */
+    touchedFields: TouchedFields;
+    /**
+     * Change the touched state of the specified field.
+     */
+    setFieldTouched: (fieldName: string, touched: boolean) => void;
 };
 export declare const FormContext: import("react").Context<FormContextValue>;

package/build/internal/formContext.js

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

package/build/internal/getInputProps.d.ts

@@ -0,0 +1,21 @@
+export declare type ValidationBehavior = "onBlur" | "onChange" | "onSubmit";
+export declare type ValidationBehaviorOptions = {
+    initial: ValidationBehavior;
+    whenTouched: ValidationBehavior;
+    whenSubmitted: ValidationBehavior;
+};
+export declare type CreateGetInputPropsOptions = {
+    clearError: () => void;
+    validate: () => void;
+    defaultValue?: any;
+    touched: boolean;
+    setTouched: (touched: boolean) => void;
+    hasBeenSubmitted: boolean;
+    validationBehavior?: Partial<ValidationBehaviorOptions>;
+    name: string;
+};
+declare type HandledProps = "name" | "defaultValue";
+declare type Callbacks = "onChange" | "onBlur";
+export declare type GetInputProps = <T extends Record<string, any>>(props?: Omit<T, HandledProps | Callbacks> & Partial<Pick<T, Callbacks>>) => T;
+export declare const createGetInputProps: ({ clearError, validate, defaultValue, touched, setTouched, hasBeenSubmitted, validationBehavior, name, }: CreateGetInputPropsOptions) => GetInputProps;
+export {};

package/build/internal/getInputProps.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createGetInputProps = void 0;
+const defaultValidationBehavior = {
+    initial: "onBlur",
+    whenTouched: "onChange",
+    whenSubmitted: "onChange",
+};
+const createGetInputProps = ({ clearError, validate, defaultValue, touched, setTouched, hasBeenSubmitted, validationBehavior, name, }) => {
+    const validationBehaviors = {
+        ...defaultValidationBehavior,
+        ...validationBehavior,
+    };
+    return (props = {}) => {
+        const behavior = hasBeenSubmitted
+            ? validationBehaviors.whenSubmitted
+            : touched
+                ? validationBehaviors.whenTouched
+                : validationBehaviors.initial;
+        const result = {
+            ...props,
+            onChange: (...args) => {
+                var _a;
+                if (behavior === "onChange")
+                    validate();
+                else
+                    clearError();
+                return (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, ...args);
+            },
+            onBlur: (...args) => {
+                var _a;
+                if (behavior === "onBlur")
+                    validate();
+                setTouched(true);
+                return (_a = props === null || props === void 0 ? void 0 : props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, ...args);
+            },
+            defaultValue,
+            name,
+        };
+        return result;
+    };
+};
+exports.createGetInputProps = createGetInputProps;

package/build/internal/test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/internal/test.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const getInputProps_1 = require("./getInputProps");
+const CompRequired = (props) => null;
+const getProps = (0, getInputProps_1.createGetInputProps)({});
+(0, jsx_runtime_1.jsx)(CompRequired, { ...getProps({
+        temp: 21,
+        bob: "ross",
+        onBlur: () => { },
+        // onChange: () => {},
+    }) }, void 0);

package/build/validation/types.d.ts

@@ -1,4 +1,5 @@
 export declare type FieldErrors = Record<string, string>;
+export declare type TouchedFields = Record<string, boolean>;
 export declare type FieldErrorsWithData = FieldErrors & {
     _submittedData: any;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "3.1.1",
+  "version": "3.3.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,16 +14,14 @@ import React, {
 } from "react";
 import invariant from "tiny-invariant";
 import { FormContext, FormContextValue } from "./internal/formContext";
-import {
-  MultiValueMap,
-  useMultiValueMap,
-} from "./internal/SingleTypeMultiValueMap";
+import { MultiValueMap, useMultiValueMap } from "./internal/MultiValueMap";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import { omit, mergeRefs } from "./internal/util";
 import {
   FieldErrors,
   Validator,
   FieldErrorsWithData,
+  TouchedFields,
 } from "./validation/types";
 
 export type FormProps<DataType> = {
@@ -196,6 +194,8 @@ export function ValidatedForm<DataType>({
   const [fieldErrors, setFieldErrors] = useFieldErrors(fieldErrorsFromBackend);
   const isSubmitting = useIsSubmitting(action, subaction, fetcher);
   const defaultsToUse = useDefaultValues(fieldErrorsFromBackend, defaultValues);
+  const [touchedFields, setTouchedFields] = useState<TouchedFields>({});
+  const [hasBeenSubmitted, setHasBeenSubmitted] = useState(false);
   const formRef = useRef<HTMLFormElement>(null);
   useSubmitComplete(isSubmitting, () => {
     if (!fieldErrorsFromBackend && resetAfterSubmit) {
@@ -211,6 +211,12 @@ export function ValidatedForm<DataType>({
       defaultValues: defaultsToUse,
       isSubmitting: isSubmitting ?? false,
       isValid: Object.keys(fieldErrors).length === 0,
+      touchedFields,
+      setFieldTouched: (fieldName: string, touched: boolean) =>
+        setTouchedFields((prev) => ({
+          ...prev,
+          [fieldName]: touched,
+        })),
       clearError: (fieldName) => {
         setFieldErrors((prev) => omit(prev, fieldName));
       },
@@ -220,11 +226,22 @@ export function ValidatedForm<DataType>({
           getDataFromForm(formRef.current),
           fieldName as any
         );
+
+        // By checking and returning `prev` here, we can avoid a re-render
+        // if the validation state is the same.
         if (error) {
-          setFieldErrors((prev) => ({
-            ...prev,
-            [fieldName]: error,
-          }));
+          setFieldErrors((prev) => {
+            if (prev[fieldName] === error) return prev;
+            return {
+              ...prev,
+              [fieldName]: error,
+            };
+          });
+        } else {
+          setFieldErrors((prev) => {
+            if (!(fieldName in prev)) return prev;
+            return omit(prev, fieldName);
+          });
         }
       },
       registerReceiveFocus: (fieldName, handler) => {
@@ -233,12 +250,15 @@ export function ValidatedForm<DataType>({
           customFocusHandlers().remove(fieldName, handler);
         };
       },
+      hasBeenSubmitted,
     }),
     [
       fieldErrors,
       action,
       defaultsToUse,
       isSubmitting,
+      touchedFields,
+      hasBeenSubmitted,
       setFieldErrors,
       validator,
       customFocusHandlers,
@@ -253,6 +273,7 @@ export function ValidatedForm<DataType>({
       {...rest}
       action={action}
       onSubmit={(event) => {
+        setHasBeenSubmitted(true);
         const result = validator.validate(getDataFromForm(event.currentTarget));
         if (result.error) {
           event.preventDefault();
@@ -272,6 +293,8 @@ export function ValidatedForm<DataType>({
         onReset?.(event);
         if (event.defaultPrevented) return;
         setFieldErrors({});
+        setTouchedFields({});
+        setHasBeenSubmitted(false);
       }}
     >
       <FormContext.Provider value={contextValue}>

package/src/hooks.ts

@@ -2,6 +2,11 @@ import get from "lodash/get";
 import toPath from "lodash/toPath";
 import { useContext, useEffect, useMemo } from "react";
 import { FormContext } from "./internal/formContext";
+import {
+  createGetInputProps,
+  GetInputProps,
+  ValidationBehaviorOptions,
+} from "./internal/getInputProps";
 
 export type FieldProps = {
   /**
@@ -20,6 +25,18 @@ export type FieldProps = {
    * The default value of the field, if there is one.
    */
   defaultValue?: any;
+  /**
+   * Whether or not the field has been touched.
+   */
+  touched: boolean;
+  /**
+   * Helper to set the touched state of the field.
+   */
+  setTouched: (touched: boolean) => void;
+  /**
+   * Helper to get all the props necessary for a regular input.
+   */
+  getInputProps: GetInputProps;
 };
 
 /**
@@ -34,6 +51,10 @@ export const useField = (
      * This is useful for custom components that use a hidden input.
      */
     handleReceiveFocus?: () => void;
+    /**
+     * Allows you to specify when a field gets validated (when using getInputProps)
+     */
+    validationBehavior?: Partial<ValidationBehaviorOptions>;
   }
 ): FieldProps => {
   const {
@@ -42,8 +63,12 @@ export const useField = (
     validateField,
     defaultValues,
     registerReceiveFocus,
+    touchedFields,
+    setFieldTouched,
+    hasBeenSubmitted,
   } = useContext(FormContext);
 
+  const isTouched = !!touchedFields[name];
   const { handleReceiveFocus } = options ?? {};
 
   useEffect(() => {
@@ -51,8 +76,8 @@ export const useField = (
       return registerReceiveFocus(name, handleReceiveFocus);
   }, [handleReceiveFocus, name, registerReceiveFocus]);
 
-  const field = useMemo<FieldProps>(
-    () => ({
+  const field = useMemo<FieldProps>(() => {
+    const helpers = {
       error: fieldErrors[name],
       clearError: () => {
         clearError(name);
@@ -61,9 +86,30 @@ export const useField = (
       defaultValue: defaultValues
         ? get(defaultValues, toPath(name), undefined)
         : undefined,
-    }),
-    [clearError, defaultValues, fieldErrors, name, validateField]
-  );
+      touched: isTouched,
+      setTouched: (touched: boolean) => setFieldTouched(name, touched),
+    };
+    const getInputProps = createGetInputProps({
+      ...helpers,
+      name,
+      hasBeenSubmitted,
+      validationBehavior: options?.validationBehavior,
+    });
+    return {
+      ...helpers,
+      getInputProps,
+    };
+  }, [
+    fieldErrors,
+    name,
+    defaultValues,
+    isTouched,
+    hasBeenSubmitted,
+    options?.validationBehavior,
+    clearError,
+    validateField,
+    setFieldTouched,
+  ]);
 
   return field;
 };

package/src/internal/{SingleTypeMultiValueMap.ts → MultiValueMap.ts}

@@ -4,7 +4,6 @@ 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 {
@@ -24,6 +23,8 @@ export class MultiValueMap<Key, Value> {
     return this.dict.get(key) ?? [];
   };
 
+  entries = (): IterableIterator<[Key, Value[]]> => this.dict.entries();
+
   has = (key: Key): boolean => this.dict.has(key);
 }
 

package/src/internal/flatten.ts

@@ -7,9 +7,16 @@ import mapKeys from "lodash/mapKeys";
 import set from "lodash/set";
 import transform from "lodash/transform";
 import { GenericObject } from "..";
+import { MultiValueMap } from "./MultiValueMap";
 
-export const objectFromPathEntries = (entries: [string, any][]) =>
-  entries.reduce((acc, [key, value]) => set(acc, key, value), {});
+export const objectFromPathEntries = (entries: [string, any][]) => {
+  const map = new MultiValueMap<string, any>();
+  entries.forEach(([key, value]) => map.add(key, value));
+  return [...map.entries()].reduce(
+    (acc, [key, value]) => set(acc, key, value.length === 1 ? value[0] : value),
+    {}
+  );
+};
 
 /** Flatten an object so there are no nested objects or arrays */
 export function flatten(obj: GenericObject, preserveEmpty = false) {

package/src/internal/formContext.ts

@@ -1,5 +1,5 @@
 import { createContext } from "react";
-import { FieldErrors } from "../validation/types";
+import { FieldErrors, TouchedFields } from "../validation/types";
 
 export type FormContextValue = {
   /**
@@ -22,6 +22,12 @@ export type FormContextValue = {
    * Whether or not the form is submitting.
    */
   isSubmitting: boolean;
+  /**
+   * Whether or not a submission has been attempted.
+   * This is true once the form has been submitted, even if there were validation errors.
+   * Resets to false when the form is reset.
+   */
+  hasBeenSubmitted: boolean;
   /**
    * Whether or not the form is valid.
    * This is a shortcut for `Object.keys(fieldErrors).length === 0`.
@@ -36,6 +42,14 @@ export type FormContextValue = {
    * the field needs to receive focus due to a validation error.
    */
   registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
+  /**
+   * Any fields that have been touched by the user.
+   */
+  touchedFields: TouchedFields;
+  /**
+   * Change the touched state of the specified field.
+   */
+  setFieldTouched: (fieldName: string, touched: boolean) => void;
 };
 
 export const FormContext = createContext<FormContextValue>({
@@ -43,6 +57,9 @@ export const FormContext = createContext<FormContextValue>({
   clearError: () => {},
   validateField: () => {},
   isSubmitting: false,
+  hasBeenSubmitted: false,
   isValid: true,
   registerReceiveFocus: () => () => {},
+  touchedFields: {},
+  setFieldTouched: () => {},
 });

package/src/internal/getInputProps.ts

@@ -0,0 +1,73 @@
+export type ValidationBehavior = "onBlur" | "onChange" | "onSubmit";
+
+export type ValidationBehaviorOptions = {
+  initial: ValidationBehavior;
+  whenTouched: ValidationBehavior;
+  whenSubmitted: ValidationBehavior;
+};
+
+export type CreateGetInputPropsOptions = {
+  clearError: () => void;
+  validate: () => void;
+  defaultValue?: any;
+  touched: boolean;
+  setTouched: (touched: boolean) => void;
+  hasBeenSubmitted: boolean;
+  validationBehavior?: Partial<ValidationBehaviorOptions>;
+  name: string;
+};
+
+type HandledProps = "name" | "defaultValue";
+type Callbacks = "onChange" | "onBlur";
+
+export type GetInputProps = <T extends Record<string, any>>(
+  props?: Omit<T, HandledProps | Callbacks> & Partial<Pick<T, Callbacks>>
+) => T;
+
+const defaultValidationBehavior: ValidationBehaviorOptions = {
+  initial: "onBlur",
+  whenTouched: "onChange",
+  whenSubmitted: "onChange",
+};
+
+export const createGetInputProps = ({
+  clearError,
+  validate,
+  defaultValue,
+  touched,
+  setTouched,
+  hasBeenSubmitted,
+  validationBehavior,
+  name,
+}: CreateGetInputPropsOptions): GetInputProps => {
+  const validationBehaviors = {
+    ...defaultValidationBehavior,
+    ...validationBehavior,
+  };
+
+  return <T extends Record<string, any>>(props = {} as any) => {
+    const behavior = hasBeenSubmitted
+      ? validationBehaviors.whenSubmitted
+      : touched
+      ? validationBehaviors.whenTouched
+      : validationBehaviors.initial;
+
+    const result: T = {
+      ...props,
+      onChange: (...args: unknown[]) => {
+        if (behavior === "onChange") validate();
+        else clearError();
+        return props?.onChange?.(...args);
+      },
+      onBlur: (...args: unknown[]) => {
+        if (behavior === "onBlur") validate();
+        setTouched(true);
+        return props?.onBlur?.(...args);
+      },
+      defaultValue,
+      name,
+    };
+
+    return result;
+  };
+};

package/src/validation/types.ts

@@ -1,5 +1,7 @@
 export type FieldErrors = Record<string, string>;
 
+export type TouchedFields = Record<string, boolean>;
+
 export type FieldErrorsWithData = FieldErrors & { _submittedData: any };
 
 export type GenericObject = { [key: string]: any };