remix-validated-form 4.5.6 → 4.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.5.6",
+  "version": "4.5.7",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./dist/remix-validated-form.cjs.js",
   "main": "./dist/remix-validated-form.umd.js",

package/src/ValidatedForm.tsx

@@ -1,4 +1,9 @@
-import { Form as RemixForm, useFetcher, useSubmit } from "@remix-run/react";
+import {
+  Form as RemixForm,
+  FormMethod,
+  useFetcher,
+  useSubmit,
+} from "@remix-run/react";
 import uniq from "lodash/uniq";
 import React, {
   ComponentProps,
@@ -303,7 +308,13 @@ export function ValidatedForm<DataType>({
     nativeEvent: HTMLSubmitEvent["nativeEvent"]
   ) => {
     startSubmit();
-    const result = await validator.validate(getDataFromForm(e.currentTarget));
+    const submitter = nativeEvent.submitter as HTMLFormSubmitter | null;
+    const formDataToValidate = getDataFromForm(e.currentTarget);
+    if (submitter?.name) {
+      formDataToValidate.append(submitter.name, submitter.value);
+    }
+
+    const result = await validator.validate(formDataToValidate);
     if (result.error) {
       setFieldErrors(result.error.fieldErrors);
       endSubmit();
@@ -315,6 +326,7 @@ export function ValidatedForm<DataType>({
         );
       }
     } else {
+      setFieldErrors({});
       const eventProxy = formEventProxy(e);
       await onSubmit?.(result.data, eventProxy);
       if (eventProxy.defaultPrevented) {
@@ -322,15 +334,17 @@ export function ValidatedForm<DataType>({
         return;
       }
 
-      const submitter = nativeEvent.submitter as HTMLFormSubmitter | null;
-
       // We deviate from the remix code here a bit because of our async submit.
       // In remix's `FormImpl`, they use `event.currentTarget` to get the form,
       // but we already have the form in `formRef.current` so we can just use that.
       // If we use `event.currentTarget` here, it will break because `currentTarget`
       // will have changed since the start of the submission.
       if (fetcher) fetcher.submit(submitter || e.currentTarget);
-      else submit(submitter || target, { replace });
+      else
+        submit(submitter || target, {
+          replace,
+          method: (submitter?.formMethod as FormMethod) || method,
+        });
     }
   };
 

package/src/validation/createValidator.ts

@@ -1,3 +1,4 @@
+import omit from "lodash/omit";
 import { CreateValidatorArg, GenericObject, Validator } from "..";
 import { FORM_ID_FIELD } from "../internal/constants";
 import { objectFromPathEntries } from "../internal/flatten";
@@ -10,6 +11,9 @@ const preprocessFormData = (data: GenericObject | FormData): GenericObject => {
   return objectFromPathEntries(Object.entries(data));
 };
 
+const omitInternalFields = (data: GenericObject): GenericObject =>
+  omit(data, FORM_ID_FIELD);
+
 /**
  * Used to create a validator for a form.
  * It provides built-in handling for unflattening nested objects and
@@ -21,7 +25,7 @@ export function createValidator<T>(
   return {
     validate: async (value) => {
       const data = preprocessFormData(value);
-      const result = await validator.validate(data);
+      const result = await validator.validate(omitInternalFields(data));
 
       if (result.error) {
         return {

package/src/validation/validation.test.ts

@@ -1,11 +1,13 @@
 import { anyString, TestFormData } from "@remix-validated-form/test-utils";
 import { withYup } from "@remix-validated-form/with-yup/src";
 import { withZod } from "@remix-validated-form/with-zod";
+import omit from "lodash/omit";
 import { Validator } from "remix-validated-form/src";
 import { objectFromPathEntries } from "remix-validated-form/src/internal/flatten";
 import { describe, it, expect } from "vitest";
 import * as yup from "yup";
 import { z } from "zod";
+import { FORM_ID_FIELD } from "../internal/constants";
 
 // If adding an adapter, write a validator that validates this shape
 type Person = {
@@ -101,6 +103,30 @@ describe("Validation", () => {
         });
       });
 
+      it("should omit internal fields", async () => {
+        const person: Person = {
+          firstName: "John",
+          lastName: "Doe",
+          age: 30,
+          address: {
+            streetAddress: "123 Main St",
+            city: "Anytown",
+            country: "USA",
+          },
+          pets: [{ animal: "dog", name: "Fido" }],
+
+          // @ts-expect-error
+          // internal filed technically not part of person type
+          [FORM_ID_FIELD]: "something",
+        };
+        expect(await validator.validate(person)).toEqual({
+          data: omit(person, FORM_ID_FIELD),
+          error: undefined,
+          submittedData: person,
+          formId: "something",
+        });
+      });
+
       it("should return field errors when invalid", async () => {
         const obj = { age: "hi!", pets: [{ animal: "dog" }] };
         expect(await validator.validate(obj)).toEqual({