remix-validated-form 3.1.0 → 3.2.2

package/.turbo/turbo-build.log

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

package/README.md

@@ -10,6 +10,10 @@ A form library built for [remix](https://remix.run) to make validation easy.
 - Supports nested objects and arrays
 - Validation library agnostic
 
+# Docs
+
+The docs are located a [remix-validated-form.io](https://www.remix-validated-form.io).
+
 # Demo
 
 https://user-images.githubusercontent.com/2811287/145734901-700a5085-a10b-4d89-88e1-5de9142b1e85.mov
@@ -60,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>
   );
 };
@@ -82,18 +82,22 @@ export const MyInput = ({ name, label }: InputProps) => {
 To best take advantage of the per-form submission detection, we can create a submit button component.
 
 ```tsx
-import { useIsSubmitting } from "remix-validated-form";
+import { useFormContext, useIsSubmitting } from "remix-validated-form";
 
 export const MySubmitButton = () => {
   const isSubmitting = useIsSubmitting();
+  const { isValid } = useFormContext();
+  const disabled = isSubmitting || !isValid;
+
   return (
-    <button type="submit" disabled={isSubmitting}>
+    <button type="submit" disabled={disabled} className={disabled ? "disabled-btn" : "btn"}>
       {isSubmitting ? "Submitting..." : "Submit"}
     </button>
   );
 };
 ```
 
+
 ## Use the form!
 
 Now that we have our components, making a form is easy!
@@ -245,3 +249,12 @@ This is happening because you or the library you are using is passing the `requi
 This library doesn't take care of eliminating them and it's up to the user how they want to manage the validation errors.
 If you wan't to disable all native HTML validations you can add `noValidate` to `<ValidatedForm>`.
 We recommend this approach since the validation will still work even if JS is disabled.
+
+## 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.
+
+## 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

@@ -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/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.d.ts

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

package/browser/internal/test.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createGetInputProps } from "./getInputProps";
+const CompRequired = (props) => null;
+const getProps = createGetInputProps({});
+_jsx(CompRequired, { ...getProps({
+        temp: 21,
+        bob: "ross",
+        onBlur: () => { },
+        // onChange: () => {},
+    }) }, void 0);

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

@@ -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;
@@ -116,17 +118,35 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
         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/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.0",
+  "version": "3.2.2",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",

package/src/ValidatedForm.tsx

@@ -24,6 +24,7 @@ import {
   FieldErrors,
   Validator,
   FieldErrorsWithData,
+  TouchedFields,
 } from "./validation/types";
 
 export type FormProps<DataType> = {
@@ -196,6 +197,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 +214,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 +229,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 +253,15 @@ export function ValidatedForm<DataType>({
           customFocusHandlers().remove(fieldName, handler);
         };
       },
+      hasBeenSubmitted,
     }),
     [
       fieldErrors,
       action,
       defaultsToUse,
       isSubmitting,
+      touchedFields,
+      hasBeenSubmitted,
       setFieldErrors,
       validator,
       customFocusHandlers,
@@ -253,6 +276,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 +296,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/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 };