remix-validated-form 2.0.1-beta.1 → 2.1.0

package/.turbo/turbo-build.log

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

package/.turbo/turbo-test.log

@@ -4,25 +4,25 @@
     Adapter for yup
       validate
         ✓ should return the data when valid (2 ms)
-        ✓ should return field errors when invalid (2 ms)
+        ✓ should return field errors when invalid (1 ms)
         ✓ should unflatten data when validating
-        ✓ should accept FormData directly and return errors
+        ✓ should accept FormData directly and return errors (1 ms)
         ✓ should accept FormData directly and return valid data (1 ms)
       validateField
         ✓ should not return an error if field is valid
         ✓ should not return an error if a nested field is valid (1 ms)
-        ✓ should return an error if field is invalid
+        ✓ should return an error if field is invalid (2 ms)
         ✓ should return an error if a nested field is invalid
     Adapter for zod
       validate
-        ✓ should return the data when valid (2 ms)
+        ✓ should return the data when valid (1 ms)
         ✓ should return field errors when invalid
         ✓ should unflatten data when validating (1 ms)
         ✓ should accept FormData directly and return errors
         ✓ should accept FormData directly and return valid data
       validateField
-        ✓ should not return an error if field is valid
-        ✓ should not return an error if a nested field is valid (1 ms)
+        ✓ should not return an error if field is valid (1 ms)
+        ✓ should not return an error if a nested field is valid
         ✓ should return an error if field is invalid
         ✓ should return an error if a nested field is invalid
   withZod
@@ -32,5 +32,5 @@
 Test Suites: 1 passed, 1 total
 Tests:       20 passed, 20 total
 Snapshots:   0 total
-Time:        1.526 s, estimated 2 s
+Time:        1.1 s, estimated 2 s
 Ran all test suites matching /src/i.

package/browser/ValidatedForm.d.ts

@@ -26,8 +26,20 @@ export declare type FormProps<DataType> = {
      * A ref to the form element.
      */
     formRef?: React.RefObject<HTMLFormElement>;
+    /**
+     * An optional sub-action to use for the form.
+     * Setting a value here will cause the form to be submitted with an extra `subaction` value.
+     * This can be useful when there are multiple forms on the screen handled by the same action.
+     */
+    subaction?: string;
+    /**
+     * Reset the form to the default values after the form has been successfully submitted.
+     * This is useful if you want to submit the same form multiple times,
+     * and don't redirect in-between submissions.
+     */
+    resetAfterSubmit?: 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, ...rest }: FormProps<DataType>): JSX.Element;
+export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, ...rest }: FormProps<DataType>): JSX.Element;

package/browser/ValidatedForm.js

@@ -1,41 +1,89 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Form as RemixForm, useActionData, useFormAction, useTransition, } from "@remix-run/react";
 import { useEffect, useMemo, useRef, useState, } from "react";
 import invariant from "tiny-invariant";
 import { FormContext } from "./internal/formContext";
+import { useSubmitComplete } from "./internal/submissionCallbacks";
 import { omit, mergeRefs } from "./internal/util";
-function useFieldErrors(fetcher) {
+function useFieldErrorsFromBackend(fetcher, subaction) {
+    var _a, _b;
     const actionData = useActionData();
-    const dataToUse = fetcher ? fetcher.data : actionData;
-    const fieldErrorsFromAction = dataToUse === null || dataToUse === void 0 ? void 0 : dataToUse.fieldErrors;
-    const [fieldErrors, setFieldErrors] = useState(fieldErrorsFromAction !== null && fieldErrorsFromAction !== void 0 ? fieldErrorsFromAction : {});
+    if (fetcher)
+        return (_a = fetcher.data) === null || _a === void 0 ? void 0 : _a.fieldErrors;
+    if (!actionData)
+        return null;
+    if (actionData.fieldErrors) {
+        const submittedData = (_b = actionData.fieldErrors) === null || _b === void 0 ? void 0 : _b._submittedData;
+        const subactionsMatch = subaction
+            ? subaction === (submittedData === null || submittedData === void 0 ? void 0 : submittedData.subaction)
+            : !(submittedData === null || submittedData === void 0 ? void 0 : submittedData.subaction);
+        return subactionsMatch ? actionData.fieldErrors : null;
+    }
+    return null;
+}
+function useFieldErrors(fieldErrorsFromBackend) {
+    const [fieldErrors, setFieldErrors] = useState(fieldErrorsFromBackend !== null && fieldErrorsFromBackend !== void 0 ? fieldErrorsFromBackend : {});
     useEffect(() => {
-        if (fieldErrorsFromAction)
-            setFieldErrors(fieldErrorsFromAction);
-    }, [fieldErrorsFromAction]);
+        if (fieldErrorsFromBackend)
+            setFieldErrors(fieldErrorsFromBackend);
+    }, [fieldErrorsFromBackend]);
     return [fieldErrors, setFieldErrors];
 }
-const useIsSubmitting = (action, fetcher) => {
+const useIsSubmitting = (action, subaction, fetcher) => {
     const actionForCurrentPage = useFormAction();
     const pendingFormSubmit = useTransition().submission;
-    return fetcher
-        ? fetcher.state === "submitting"
-        : pendingFormSubmit &&
-            pendingFormSubmit.action === (action !== null && action !== void 0 ? action : actionForCurrentPage);
+    if (fetcher)
+        return fetcher.state === "submitting";
+    if (!pendingFormSubmit)
+        return false;
+    const { formData, action: pendingAction } = pendingFormSubmit;
+    const pendingSubAction = formData.get("subaction");
+    const expectedAction = action !== null && action !== void 0 ? action : actionForCurrentPage;
+    if (subaction)
+        return expectedAction === pendingAction && subaction === pendingSubAction;
+    return expectedAction === pendingAction && !pendingSubAction;
 };
 const getDataFromForm = (el) => new FormData(el);
+/**
+ * The purpose for this logic is to handle validation errors when javascript is disabled.
+ * Normally (without js), when a form is submitted and the action returns the validation errors,
+ * the form will be reset. The errors will be displayed on the correct fields,
+ * but all the values in the form will be gone. This is not good UX.
+ *
+ * To get around this, we return the submitted form data from the server,
+ * and use those to populate the form via `defaultValues`.
+ * This results in a more seamless UX akin to what you would see when js is enabled.
+ *
+ * One potential downside is that resetting the form will reset the form
+ * to the _new_ default values that were returned from the server with the validation errors.
+ * However, this case is less of a problem than the janky UX caused by losing the form values.
+ * It will only ever be a problem if the form includes a `<button type="reset" />`
+ * and only if JS is disabled.
+ */
+function useDefaultValues(fieldErrors, defaultValues) {
+    const defaultsFromValidationError = fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors._submittedData;
+    return defaultsFromValidationError !== null && defaultsFromValidationError !== void 0 ? defaultsFromValidationError : defaultValues;
+}
 /**
  * The primary form component of `remix-validated-form`.
  */
-export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, ...rest }) {
+export function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, ...rest }) {
     var _a;
-    const [fieldErrors, setFieldErrors] = useFieldErrors(fetcher);
-    const isSubmitting = useIsSubmitting(action, fetcher);
+    const fieldErrorsFromBackend = useFieldErrorsFromBackend(fetcher, subaction);
+    const [fieldErrors, setFieldErrors] = useFieldErrors(fieldErrorsFromBackend);
+    const isSubmitting = useIsSubmitting(action, subaction, fetcher);
+    const defaultsToUse = useDefaultValues(fieldErrorsFromBackend, defaultValues);
     const formRef = useRef(null);
+    useSubmitComplete(isSubmitting, () => {
+        var _a;
+        if (!fieldErrorsFromBackend && resetAfterSubmit) {
+            (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
+        }
+    });
     const contextValue = useMemo(() => ({
         fieldErrors,
         action,
-        defaultValues,
+        defaultValues: defaultsToUse,
         isSubmitting: isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : false,
         clearError: (fieldName) => {
             setFieldErrors((prev) => omit(prev, fieldName));
@@ -53,7 +101,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
     }), [
         fieldErrors,
         action,
-        defaultValues,
+        defaultsToUse,
         isSubmitting,
         setFieldErrors,
         validator,
@@ -68,5 +116,10 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             else {
                 onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(result.data, event);
             }
-        }, children: _jsx(FormContext.Provider, { value: contextValue, children: children }, void 0) }, void 0));
+        }, onReset: (event) => {
+            onReset === null || onReset === void 0 ? void 0 : onReset(event);
+            if (event.defaultPrevented)
+                return;
+            setFieldErrors({});
+        }, children: _jsxs(FormContext.Provider, { value: contextValue, children: [_jsx("input", { type: "hidden", value: subaction, name: "subaction" }, void 0), children] }, void 0) }, void 0));
 }

package/browser/internal/submissionCallbacks.d.ts

@@ -0,0 +1 @@
+export declare function useSubmitComplete(isSubmitting: boolean, callback: () => void): void;

package/browser/internal/submissionCallbacks.js

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from "react";
+export function useSubmitComplete(isSubmitting, callback) {
+    const isPending = useRef(false);
+    useEffect(() => {
+        if (isSubmitting) {
+            isPending.current = true;
+        }
+        if (!isSubmitting && isPending.current) {
+            isPending.current = false;
+            callback();
+        }
+    });
+}

package/browser/validation/createValidator.js

@@ -13,7 +13,18 @@ const preprocessFormData = (data) => {
  */
 export function createValidator(validator) {
     return {
-        validate: (value) => validator.validate(preprocessFormData(value)),
+        validate: (value) => {
+            const data = preprocessFormData(value);
+            const result = validator.validate(data);
+            if (result.error) {
+                // Ideally, we should probably be returning a nested object like
+                // { fieldErrors: {}, submittedData: {} }
+                // We should do this in the next major version of the library
+                // but for now, we can sneak it in with the fieldErrors.
+                result.error._submittedData = data;
+            }
+            return result;
+        },
         validateField: (data, field) => validator.validateField(preprocessFormData(data), field),
     };
 }

package/browser/validation/types.d.ts

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

package/browser/validation/validation.test.js

@@ -1,6 +1,7 @@
 import * as yup from "yup";
 import { z } from "zod";
 import { withYup } from "..";
+import { objectFromPathEntries } from "../internal/flatten";
 import { TestFormData } from "../test-data/testFormData";
 import { withZod } from "./withZod";
 const validationTestCases = [
@@ -78,6 +79,7 @@ describe("Validation", () => {
                         "address.country": anyString,
                         "address.streetAddress": anyString,
                         "pets[0].name": anyString,
+                        _submittedData: obj,
                     },
                 });
             });
@@ -119,6 +121,7 @@ describe("Validation", () => {
                     error: {
                         "address.city": anyString,
                         "pets[0].name": anyString,
+                        _submittedData: objectFromPathEntries([...formData.entries()]),
                     },
                 });
             });
@@ -239,6 +242,7 @@ describe("withZod", () => {
                 type: anyString,
                 bar: anyString,
                 foo: anyString,
+                _submittedData: obj,
             },
         });
     });
@@ -257,6 +261,7 @@ describe("withZod", () => {
             error: {
                 field1: anyString,
                 field2: anyString,
+                _submittedData: obj,
             },
         });
         expect(validator.validateField(obj, "field1")).toEqual({

package/build/ValidatedForm.d.ts

@@ -26,8 +26,20 @@ export declare type FormProps<DataType> = {
      * A ref to the form element.
      */
     formRef?: React.RefObject<HTMLFormElement>;
+    /**
+     * An optional sub-action to use for the form.
+     * Setting a value here will cause the form to be submitted with an extra `subaction` value.
+     * This can be useful when there are multiple forms on the screen handled by the same action.
+     */
+    subaction?: string;
+    /**
+     * Reset the form to the default values after the form has been successfully submitted.
+     * This is useful if you want to submit the same form multiple times,
+     * and don't redirect in-between submissions.
+     */
+    resetAfterSubmit?: 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, ...rest }: FormProps<DataType>): JSX.Element;
+export declare function ValidatedForm<DataType>({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, ...rest }: FormProps<DataType>): JSX.Element;

package/build/ValidatedForm.js

@@ -9,39 +9,87 @@ 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 submissionCallbacks_1 = require("./internal/submissionCallbacks");
 const util_1 = require("./internal/util");
-function useFieldErrors(fetcher) {
+function useFieldErrorsFromBackend(fetcher, subaction) {
+    var _a, _b;
     const actionData = (0, react_1.useActionData)();
-    const dataToUse = fetcher ? fetcher.data : actionData;
-    const fieldErrorsFromAction = dataToUse === null || dataToUse === void 0 ? void 0 : dataToUse.fieldErrors;
-    const [fieldErrors, setFieldErrors] = (0, react_2.useState)(fieldErrorsFromAction !== null && fieldErrorsFromAction !== void 0 ? fieldErrorsFromAction : {});
+    if (fetcher)
+        return (_a = fetcher.data) === null || _a === void 0 ? void 0 : _a.fieldErrors;
+    if (!actionData)
+        return null;
+    if (actionData.fieldErrors) {
+        const submittedData = (_b = actionData.fieldErrors) === null || _b === void 0 ? void 0 : _b._submittedData;
+        const subactionsMatch = subaction
+            ? subaction === (submittedData === null || submittedData === void 0 ? void 0 : submittedData.subaction)
+            : !(submittedData === null || submittedData === void 0 ? void 0 : submittedData.subaction);
+        return subactionsMatch ? actionData.fieldErrors : null;
+    }
+    return null;
+}
+function useFieldErrors(fieldErrorsFromBackend) {
+    const [fieldErrors, setFieldErrors] = (0, react_2.useState)(fieldErrorsFromBackend !== null && fieldErrorsFromBackend !== void 0 ? fieldErrorsFromBackend : {});
     (0, react_2.useEffect)(() => {
-        if (fieldErrorsFromAction)
-            setFieldErrors(fieldErrorsFromAction);
-    }, [fieldErrorsFromAction]);
+        if (fieldErrorsFromBackend)
+            setFieldErrors(fieldErrorsFromBackend);
+    }, [fieldErrorsFromBackend]);
     return [fieldErrors, setFieldErrors];
 }
-const useIsSubmitting = (action, fetcher) => {
+const useIsSubmitting = (action, subaction, fetcher) => {
     const actionForCurrentPage = (0, react_1.useFormAction)();
     const pendingFormSubmit = (0, react_1.useTransition)().submission;
-    return fetcher
-        ? fetcher.state === "submitting"
-        : pendingFormSubmit &&
-            pendingFormSubmit.action === (action !== null && action !== void 0 ? action : actionForCurrentPage);
+    if (fetcher)
+        return fetcher.state === "submitting";
+    if (!pendingFormSubmit)
+        return false;
+    const { formData, action: pendingAction } = pendingFormSubmit;
+    const pendingSubAction = formData.get("subaction");
+    const expectedAction = action !== null && action !== void 0 ? action : actionForCurrentPage;
+    if (subaction)
+        return expectedAction === pendingAction && subaction === pendingSubAction;
+    return expectedAction === pendingAction && !pendingSubAction;
 };
 const getDataFromForm = (el) => new FormData(el);
+/**
+ * The purpose for this logic is to handle validation errors when javascript is disabled.
+ * Normally (without js), when a form is submitted and the action returns the validation errors,
+ * the form will be reset. The errors will be displayed on the correct fields,
+ * but all the values in the form will be gone. This is not good UX.
+ *
+ * To get around this, we return the submitted form data from the server,
+ * and use those to populate the form via `defaultValues`.
+ * This results in a more seamless UX akin to what you would see when js is enabled.
+ *
+ * One potential downside is that resetting the form will reset the form
+ * to the _new_ default values that were returned from the server with the validation errors.
+ * However, this case is less of a problem than the janky UX caused by losing the form values.
+ * It will only ever be a problem if the form includes a `<button type="reset" />`
+ * and only if JS is disabled.
+ */
+function useDefaultValues(fieldErrors, defaultValues) {
+    const defaultsFromValidationError = fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors._submittedData;
+    return defaultsFromValidationError !== null && defaultsFromValidationError !== void 0 ? defaultsFromValidationError : defaultValues;
+}
 /**
  * The primary form component of `remix-validated-form`.
  */
-function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, ...rest }) {
+function ValidatedForm({ validator, onSubmit, children, fetcher, action, defaultValues, formRef: formRefProp, onReset, subaction, resetAfterSubmit, ...rest }) {
     var _a;
-    const [fieldErrors, setFieldErrors] = useFieldErrors(fetcher);
-    const isSubmitting = useIsSubmitting(action, fetcher);
+    const fieldErrorsFromBackend = useFieldErrorsFromBackend(fetcher, subaction);
+    const [fieldErrors, setFieldErrors] = useFieldErrors(fieldErrorsFromBackend);
+    const isSubmitting = useIsSubmitting(action, subaction, fetcher);
+    const defaultsToUse = useDefaultValues(fieldErrorsFromBackend, defaultValues);
     const formRef = (0, react_2.useRef)(null);
+    (0, submissionCallbacks_1.useSubmitComplete)(isSubmitting, () => {
+        var _a;
+        if (!fieldErrorsFromBackend && resetAfterSubmit) {
+            (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
+        }
+    });
     const contextValue = (0, react_2.useMemo)(() => ({
         fieldErrors,
         action,
-        defaultValues,
+        defaultValues: defaultsToUse,
         isSubmitting: isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : false,
         clearError: (fieldName) => {
             setFieldErrors((prev) => (0, util_1.omit)(prev, fieldName));
@@ -59,7 +107,7 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
     }), [
         fieldErrors,
         action,
-        defaultValues,
+        defaultsToUse,
         isSubmitting,
         setFieldErrors,
         validator,
@@ -74,6 +122,11 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
             else {
                 onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(result.data, event);
             }
-        }, children: (0, jsx_runtime_1.jsx)(formContext_1.FormContext.Provider, { value: contextValue, children: children }, void 0) }, void 0));
+        }, onReset: (event) => {
+            onReset === null || onReset === void 0 ? void 0 : onReset(event);
+            if (event.defaultPrevented)
+                return;
+            setFieldErrors({});
+        }, children: (0, jsx_runtime_1.jsxs)(formContext_1.FormContext.Provider, { value: contextValue, children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", value: subaction, name: "subaction" }, void 0), children] }, void 0) }, void 0));
 }
 exports.ValidatedForm = ValidatedForm;

package/build/internal/submissionCallbacks.d.ts

@@ -0,0 +1 @@
+export declare function useSubmitComplete(isSubmitting: boolean, callback: () => void): void;

package/build/internal/submissionCallbacks.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSubmitComplete = void 0;
+const react_1 = require("react");
+function useSubmitComplete(isSubmitting, callback) {
+    const isPending = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (isSubmitting) {
+            isPending.current = true;
+        }
+        if (!isSubmitting && isPending.current) {
+            isPending.current = false;
+            callback();
+        }
+    });
+}
+exports.useSubmitComplete = useSubmitComplete;

package/build/validation/createValidator.js

@@ -16,7 +16,18 @@ const preprocessFormData = (data) => {
  */
 function createValidator(validator) {
     return {
-        validate: (value) => validator.validate(preprocessFormData(value)),
+        validate: (value) => {
+            const data = preprocessFormData(value);
+            const result = validator.validate(data);
+            if (result.error) {
+                // Ideally, we should probably be returning a nested object like
+                // { fieldErrors: {}, submittedData: {} }
+                // We should do this in the next major version of the library
+                // but for now, we can sneak it in with the fieldErrors.
+                result.error._submittedData = data;
+            }
+            return result;
+        },
         validateField: (data, field) => validator.validateField(preprocessFormData(data), field),
     };
 }

package/build/validation/types.d.ts

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

package/build/validation/validation.test.js

@@ -22,6 +22,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const yup = __importStar(require("yup"));
 const zod_1 = require("zod");
 const __1 = require("..");
+const flatten_1 = require("../internal/flatten");
 const testFormData_1 = require("../test-data/testFormData");
 const withZod_1 = require("./withZod");
 const validationTestCases = [
@@ -99,6 +100,7 @@ describe("Validation", () => {
                         "address.country": anyString,
                         "address.streetAddress": anyString,
                         "pets[0].name": anyString,
+                        _submittedData: obj,
                     },
                 });
             });
@@ -140,6 +142,7 @@ describe("Validation", () => {
                     error: {
                         "address.city": anyString,
                         "pets[0].name": anyString,
+                        _submittedData: (0, flatten_1.objectFromPathEntries)([...formData.entries()]),
                     },
                 });
             });
@@ -260,6 +263,7 @@ describe("withZod", () => {
                 type: anyString,
                 bar: anyString,
                 foo: anyString,
+                _submittedData: obj,
             },
         });
     });
@@ -278,6 +282,7 @@ describe("withZod", () => {
             error: {
                 field1: anyString,
                 field2: anyString,
+                _submittedData: obj,
             },
         });
         expect(validator.validateField(obj, "field1")).toEqual({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "2.0.1-beta.1",
+  "version": "2.1.0",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",
@@ -17,7 +17,7 @@
     "test": "jest src",
     "test:watch": "jest src --watch",
     "prepublishOnly": "cp ../../README.md ./README.md && npm run build",
-    "postpublishOnly": "rm ./README.md"
+    "postpublish": "rm ./README.md"
   },
   "author": {
     "name": "Aaron Pettengill",

package/src/ValidatedForm.tsx

@@ -14,8 +14,13 @@ import React, {
 } from "react";
 import invariant from "tiny-invariant";
 import { FormContext, FormContextValue } from "./internal/formContext";
+import { useSubmitComplete } from "./internal/submissionCallbacks";
 import { omit, mergeRefs } from "./internal/util";
-import { FieldErrors, Validator } from "./validation/types";
+import {
+  FieldErrors,
+  Validator,
+  FieldErrorsWithData,
+} from "./validation/types";
 
 export type FormProps<DataType> = {
   /**
@@ -42,39 +47,95 @@ export type FormProps<DataType> = {
    * A ref to the form element.
    */
   formRef?: React.RefObject<HTMLFormElement>;
+  /**
+   * An optional sub-action to use for the form.
+   * Setting a value here will cause the form to be submitted with an extra `subaction` value.
+   * This can be useful when there are multiple forms on the screen handled by the same action.
+   */
+  subaction?: string;
+  /**
+   * Reset the form to the default values after the form has been successfully submitted.
+   * This is useful if you want to submit the same form multiple times,
+   * and don't redirect in-between submissions.
+   */
+  resetAfterSubmit?: boolean;
 } & Omit<ComponentProps<typeof RemixForm>, "onSubmit">;
 
-function useFieldErrors(
-  fetcher?: ReturnType<typeof useFetcher>
-): [FieldErrors, React.Dispatch<React.SetStateAction<FieldErrors>>] {
+function useFieldErrorsFromBackend(
+  fetcher?: ReturnType<typeof useFetcher>,
+  subaction?: string
+): FieldErrorsWithData | null {
   const actionData = useActionData<any>();
-  const dataToUse = fetcher ? fetcher.data : actionData;
-  const fieldErrorsFromAction = dataToUse?.fieldErrors;
+  if (fetcher) return (fetcher.data as any)?.fieldErrors;
+  if (!actionData) return null;
+  if (actionData.fieldErrors) {
+    const submittedData = actionData.fieldErrors?._submittedData;
+    const subactionsMatch = subaction
+      ? subaction === submittedData?.subaction
+      : !submittedData?.subaction;
+    return subactionsMatch ? actionData.fieldErrors : null;
+  }
+  return null;
+}
 
+function useFieldErrors(
+  fieldErrorsFromBackend?: any
+): [FieldErrors, React.Dispatch<React.SetStateAction<FieldErrors>>] {
   const [fieldErrors, setFieldErrors] = useState<FieldErrors>(
-    fieldErrorsFromAction ?? {}
+    fieldErrorsFromBackend ?? {}
   );
   useEffect(() => {
-    if (fieldErrorsFromAction) setFieldErrors(fieldErrorsFromAction);
-  }, [fieldErrorsFromAction]);
+    if (fieldErrorsFromBackend) setFieldErrors(fieldErrorsFromBackend);
+  }, [fieldErrorsFromBackend]);
 
   return [fieldErrors, setFieldErrors];
 }
 
 const useIsSubmitting = (
   action?: string,
+  subaction?: string,
   fetcher?: ReturnType<typeof useFetcher>
 ) => {
   const actionForCurrentPage = useFormAction();
   const pendingFormSubmit = useTransition().submission;
-  return fetcher
-    ? fetcher.state === "submitting"
-    : pendingFormSubmit &&
-        pendingFormSubmit.action === (action ?? actionForCurrentPage);
+
+  if (fetcher) return fetcher.state === "submitting";
+  if (!pendingFormSubmit) return false;
+
+  const { formData, action: pendingAction } = pendingFormSubmit;
+  const pendingSubAction = formData.get("subaction");
+  const expectedAction = action ?? actionForCurrentPage;
+  if (subaction)
+    return expectedAction === pendingAction && subaction === pendingSubAction;
+  return expectedAction === pendingAction && !pendingSubAction;
 };
 
 const getDataFromForm = (el: HTMLFormElement) => new FormData(el);
 
+/**
+ * The purpose for this logic is to handle validation errors when javascript is disabled.
+ * Normally (without js), when a form is submitted and the action returns the validation errors,
+ * the form will be reset. The errors will be displayed on the correct fields,
+ * but all the values in the form will be gone. This is not good UX.
+ *
+ * To get around this, we return the submitted form data from the server,
+ * and use those to populate the form via `defaultValues`.
+ * This results in a more seamless UX akin to what you would see when js is enabled.
+ *
+ * One potential downside is that resetting the form will reset the form
+ * to the _new_ default values that were returned from the server with the validation errors.
+ * However, this case is less of a problem than the janky UX caused by losing the form values.
+ * It will only ever be a problem if the form includes a `<button type="reset" />`
+ * and only if JS is disabled.
+ */
+function useDefaultValues<DataType>(
+  fieldErrors?: FieldErrorsWithData | null,
+  defaultValues?: Partial<DataType>
+) {
+  const defaultsFromValidationError = fieldErrors?._submittedData;
+  return defaultsFromValidationError ?? defaultValues;
+}
+
 /**
  * The primary form component of `remix-validated-form`.
  */
@@ -86,18 +147,27 @@ export function ValidatedForm<DataType>({
   action,
   defaultValues,
   formRef: formRefProp,
+  onReset,
+  subaction,
+  resetAfterSubmit,
   ...rest
 }: FormProps<DataType>) {
-  const [fieldErrors, setFieldErrors] = useFieldErrors(fetcher);
-  const isSubmitting = useIsSubmitting(action, fetcher);
-
+  const fieldErrorsFromBackend = useFieldErrorsFromBackend(fetcher, subaction);
+  const [fieldErrors, setFieldErrors] = useFieldErrors(fieldErrorsFromBackend);
+  const isSubmitting = useIsSubmitting(action, subaction, fetcher);
+  const defaultsToUse = useDefaultValues(fieldErrorsFromBackend, defaultValues);
   const formRef = useRef<HTMLFormElement>(null);
+  useSubmitComplete(isSubmitting, () => {
+    if (!fieldErrorsFromBackend && resetAfterSubmit) {
+      formRef.current?.reset();
+    }
+  });
 
   const contextValue = useMemo<FormContextValue>(
     () => ({
       fieldErrors,
       action,
-      defaultValues,
+      defaultValues: defaultsToUse,
       isSubmitting: isSubmitting ?? false,
       clearError: (fieldName) => {
         setFieldErrors((prev) => omit(prev, fieldName));
@@ -119,7 +189,7 @@ export function ValidatedForm<DataType>({
     [
       fieldErrors,
       action,
-      defaultValues,
+      defaultsToUse,
       isSubmitting,
       setFieldErrors,
       validator,
@@ -142,8 +212,14 @@ export function ValidatedForm<DataType>({
           onSubmit?.(result.data, event);
         }
       }}
+      onReset={(event) => {
+        onReset?.(event);
+        if (event.defaultPrevented) return;
+        setFieldErrors({});
+      }}
     >
       <FormContext.Provider value={contextValue}>
+        <input type="hidden" value={subaction} name="subaction" />
         {children}
       </FormContext.Provider>
     </Form>

package/src/internal/submissionCallbacks.ts

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from "react";
+
+export function useSubmitComplete(isSubmitting: boolean, callback: () => void) {
+  const isPending = useRef(false);
+  useEffect(() => {
+    if (isSubmitting) {
+      isPending.current = true;
+    }
+
+    if (!isSubmitting && isPending.current) {
+      isPending.current = false;
+      callback();
+    }
+  });
+}

package/src/validation/createValidator.ts

@@ -16,8 +16,18 @@ const preprocessFormData = (data: GenericObject | FormData): GenericObject => {
  */
 export function createValidator<T>(validator: Validator<T>): Validator<T> {
   return {
-    validate: (value: GenericObject | FormData) =>
-      validator.validate(preprocessFormData(value)),
+    validate: (value: GenericObject | FormData) => {
+      const data = preprocessFormData(value);
+      const result = validator.validate(data);
+      if (result.error) {
+        // Ideally, we should probably be returning a nested object like
+        // { fieldErrors: {}, submittedData: {} }
+        // We should do this in the next major version of the library
+        // but for now, we can sneak it in with the fieldErrors.
+        result.error._submittedData = data as any;
+      }
+      return result;
+    },
     validateField: (data: GenericObject | FormData, field: string) =>
       validator.validateField(preprocessFormData(data), field),
   };

package/src/validation/types.ts

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

package/src/validation/validation.test.ts

@@ -1,6 +1,7 @@
 import * as yup from "yup";
 import { z } from "zod";
 import { Validator, withYup } from "..";
+import { objectFromPathEntries } from "../internal/flatten";
 import { TestFormData } from "../test-data/testFormData";
 import { withZod } from "./withZod";
 
@@ -112,6 +113,7 @@ describe("Validation", () => {
             "address.country": anyString,
             "address.streetAddress": anyString,
             "pets[0].name": anyString,
+            _submittedData: obj,
           },
         });
       });
@@ -156,6 +158,7 @@ describe("Validation", () => {
           error: {
             "address.city": anyString,
             "pets[0].name": anyString,
+            _submittedData: objectFromPathEntries([...formData.entries()]),
           },
         });
       });
@@ -285,6 +288,7 @@ describe("withZod", () => {
         type: anyString,
         bar: anyString,
         foo: anyString,
+        _submittedData: obj,
       },
     });
   });
@@ -305,6 +309,7 @@ describe("withZod", () => {
       error: {
         field1: anyString,
         field2: anyString,
+        _submittedData: obj,
       },
     });
     expect(validator.validateField(obj, "field1")).toEqual({