remix-validated-form 4.5.0-beta.0 → 4.5.1

package/dist/types/internal/hooks.d.ts

@@ -18,7 +18,7 @@ export declare const useInternalIsSubmitting: (formId: InternalFormId) => boolea
 export declare const useInternalIsValid: (formId: InternalFormId) => boolean;
 export declare const useInternalHasBeenSubmitted: (formId: InternalFormId) => boolean;
 export declare const useValidateField: (formId: InternalFormId) => (fieldName: string) => Promise<string | null>;
-export declare const useValidate: (formId: InternalFormId) => () => Promise<void>;
+export declare const useValidate: (formId: InternalFormId) => () => Promise<import("..").ValidationResult<unknown>>;
 export declare const useRegisterReceiveFocus: (formId: InternalFormId) => (fieldName: string, handler: () => void) => () => void;
 export declare const useSyncedDefaultValues: (formId: InternalFormId) => {
     [fieldName: string]: any;
@@ -28,5 +28,7 @@ export declare const useTouchedFields: (formId: InternalFormId) => import("..").
 export declare const useFieldErrors: (formId: InternalFormId) => FieldErrors;
 export declare const useSetFieldErrors: (formId: InternalFormId) => (errors: FieldErrors) => void;
 export declare const useResetFormElement: (formId: InternalFormId) => () => void;
+export declare const useSubmitForm: (formId: InternalFormId) => () => void;
 export declare const useFormActionProp: (formId: InternalFormId) => string | undefined;
 export declare const useFormSubactionProp: (formId: InternalFormId) => string | undefined;
+export declare const useFormValues: (formId: InternalFormId) => () => FormData;

package/dist/types/internal/state/createFormStore.d.ts

@@ -1,5 +1,5 @@
 import { WritableDraft } from "immer/dist/internal";
-import { FieldErrors, TouchedFields, Validator } from "../../validation/types";
+import { FieldErrors, TouchedFields, ValidationResult, Validator } from "../../validation/types";
 import { InternalFormId } from "./types";
 export declare type SyncedFormProps = {
     formId?: string;
@@ -39,8 +39,10 @@ export declare type FormState = {
     setHydrated: () => void;
     setFormElement: (formElement: HTMLFormElement | null) => void;
     validateField: (fieldName: string) => Promise<string | null>;
-    validate: () => Promise<void>;
+    validate: () => Promise<ValidationResult<unknown>>;
     resetFormElement: () => void;
+    submit: () => void;
+    getValues: () => FormData;
 };
 export declare const useRootFormStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<FormStoreState>, "setState"> & {
     setState(nextStateOrUpdater: FormStoreState | Partial<FormStoreState> | ((state: WritableDraft<FormStoreState>) => void), shouldReplace?: boolean | undefined): void;

package/dist/types/unreleased/formStateHooks.d.ts

@@ -1,4 +1,4 @@
-import { FieldErrors, TouchedFields } from "../validation/types";
+import { FieldErrors, TouchedFields, ValidationResult } from "../validation/types";
 export declare type FormState = {
     fieldErrors: FieldErrors;
     isSubmitting: boolean;
@@ -33,7 +33,7 @@ export declare type FormHelpers = {
     /**
      * Validate the whole form and populate any errors.
      */
-    validate: () => Promise<void>;
+    validate: () => Promise<ValidationResult<unknown>>;
     /**
      * Clears all errors on the form.
      */
@@ -45,6 +45,16 @@ export declare type FormHelpers = {
      * or clicking a button element with `type="reset"`.
      */
     reset: () => void;
+    /**
+     * Submits the form, running all validations first.
+     *
+     * _Note_: This is equivalent to clicking a button element with `type="submit"` or calling formElement.submit().
+     */
+    submit: () => void;
+    /**
+     * Returns the current form values as FormData
+     */
+    getValues: () => FormData;
 };
 /**
  * Returns helpers that can be used to update the form state.

package/dist/types/userFacingFormContext.d.ts

@@ -1,4 +1,4 @@
-import { FieldErrors, TouchedFields } from "./validation/types";
+import { FieldErrors, TouchedFields, ValidationResult } from "./validation/types";
 export declare type FormContextValue = {
     /**
      * All the errors in all the fields in the form.
@@ -56,7 +56,7 @@ export declare type FormContextValue = {
     /**
      * Validate the whole form and populate any errors.
      */
-    validate: () => Promise<void>;
+    validate: () => Promise<ValidationResult<unknown>>;
     /**
      * Clears all errors on the form.
      */
@@ -68,6 +68,16 @@ export declare type FormContextValue = {
      * or clicking a button element with `type="reset"`.
      */
     reset: () => void;
+    /**
+     * Submits the form, running all validations first.
+     *
+     * _Note_: This is equivalent to clicking a button element with `type="submit"` or calling formElement.submit().
+     */
+    submit: () => void;
+    /**
+     * Returns the current form values as FormData
+     */
+    getValues: () => FormData;
 };
 /**
  * Provides access to some of the internal state of the form.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.5.0-beta.0",
+  "version": "4.5.1",
   "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

@@ -98,7 +98,8 @@ const focusFirstInvalidInput = (
   const namesInOrder = [...formElement.elements]
     .map((el) => {
       const input = el instanceof RadioNodeList ? el[0] : el;
-      if (input instanceof HTMLInputElement) return input.name;
+      if (input instanceof HTMLElement && "name" in input)
+        return (input as any).name;
       return null;
     })
     .filter(nonNull)
@@ -129,8 +130,8 @@ const focusFirstInvalidInput = (
       }
     }
 
-    if (elem instanceof HTMLInputElement) {
-      if (elem.type === "hidden") {
+    if (elem instanceof HTMLElement) {
+      if (elem instanceof HTMLInputElement && elem.type === "hidden") {
         continue;
       }
 
@@ -296,33 +297,11 @@ export function ValidatedForm<DataType>({
     endSubmit();
   });
 
-  let clickedButtonRef = React.useRef<any>();
-  useEffect(() => {
-    let form = formRef.current;
-    if (!form) return;
-
-    function handleClick(event: MouseEvent) {
-      if (!(event.target instanceof HTMLElement)) return;
-      let submitButton = event.target.closest<
-        HTMLButtonElement | HTMLInputElement
-      >("button,input[type=submit]");
-
-      if (
-        submitButton &&
-        submitButton.form === form &&
-        submitButton.type === "submit"
-      ) {
-        clickedButtonRef.current = submitButton;
-      }
-    }
-
-    window.addEventListener("click", handleClick, { capture: true });
-    return () => {
-      window.removeEventListener("click", handleClick, { capture: true });
-    };
-  }, []);
-
-  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (
+    e: FormEvent<HTMLFormElement>,
+    target: typeof e.currentTarget,
+    nativeEvent: HTMLSubmitEvent["nativeEvent"]
+  ) => {
     startSubmit();
     const result = await validator.validate(getDataFromForm(e.currentTarget));
     if (result.error) {
@@ -343,8 +322,7 @@ export function ValidatedForm<DataType>({
         return;
       }
 
-      const submitter = (e as unknown as HTMLSubmitEvent).nativeEvent
-        .submitter as HTMLFormSubmitter | null;
+      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,
@@ -352,9 +330,7 @@ export function ValidatedForm<DataType>({
       // 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 || e.currentTarget, { method, replace });
-
-      clickedButtonRef.current = null;
+      else submit(submitter || target, { replace });
     }
   };
 
@@ -368,7 +344,11 @@ export function ValidatedForm<DataType>({
       replace={replace}
       onSubmit={(e) => {
         e.preventDefault();
-        handleSubmit(e);
+        handleSubmit(
+          e,
+          e.currentTarget,
+          (e as unknown as HTMLSubmitEvent).nativeEvent
+        );
       }}
       onReset={(event) => {
         onReset?.(event);
@@ -378,12 +358,14 @@ export function ValidatedForm<DataType>({
       }}
     >
       <InternalFormContext.Provider value={contextValue}>
-        <FormResetter formRef={formRef} resetAfterSubmit={resetAfterSubmit} />
-        {subaction && (
-          <input type="hidden" value={subaction} name="subaction" />
-        )}
-        {id && <input type="hidden" value={id} name={FORM_ID_FIELD} />}
-        {children}
+        <>
+          <FormResetter formRef={formRef} resetAfterSubmit={resetAfterSubmit} />
+          {subaction && (
+            <input type="hidden" value={subaction} name="subaction" />
+          )}
+          {id && <input type="hidden" value={id} name={FORM_ID_FIELD} />}
+          {children}
+        </>
       </InternalFormContext.Provider>
     </Form>
   );

package/src/internal/hooks.ts

@@ -196,8 +196,14 @@ export const useSetFieldErrors = (formId: InternalFormId) =>
 export const useResetFormElement = (formId: InternalFormId) =>
   useFormStore(formId, (state) => state.resetFormElement);
 
+export const useSubmitForm = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.submit);
+
 export const useFormActionProp = (formId: InternalFormId) =>
   useFormStore(formId, (state) => state.formProps?.action);
 
 export const useFormSubactionProp = (formId: InternalFormId) =>
   useFormStore(formId, (state) => state.formProps?.subaction);
+
+export const useFormValues = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.getValues);

package/src/internal/state/createFormStore.ts

@@ -2,7 +2,12 @@ import { WritableDraft } from "immer/dist/internal";
 import invariant from "tiny-invariant";
 import create, { GetState } from "zustand";
 import { immer } from "zustand/middleware/immer";
-import { FieldErrors, TouchedFields, Validator } from "../../validation/types";
+import {
+  FieldErrors,
+  TouchedFields,
+  ValidationResult,
+  Validator,
+} from "../../validation/types";
 import { useControlledFieldStore } from "./controlledFieldStore";
 import { InternalFormId } from "./types";
 
@@ -43,8 +48,10 @@ export type FormState = {
   setHydrated: () => void;
   setFormElement: (formElement: HTMLFormElement | null) => void;
   validateField: (fieldName: string) => Promise<string | null>;
-  validate: () => Promise<void>;
+  validate: () => Promise<ValidationResult<unknown>>;
   resetFormElement: () => void;
+  submit: () => void;
+  getValues: () => FormData;
 };
 
 const noOp = () => {};
@@ -69,9 +76,16 @@ const defaultFormState: FormState = {
   setFormElement: noOp,
   validateField: async () => null,
 
-  validate: async () => {},
+  validate: async () => {
+    throw new Error("Validate called before form was initialized.");
+  },
+
+  submit: async () => {
+    throw new Error("Submit called before form was initialized.");
+  },
 
   resetFormElement: noOp,
+  getValues: () => new FormData(),
 };
 
 const createFormState = (
@@ -113,7 +127,6 @@ const createFormState = (
     set((state) => {
       delete state.fieldErrors[fieldName];
     }),
-
   reset: () =>
     set((state) => {
       state.fieldErrors = {};
@@ -181,8 +194,29 @@ const createFormState = (
       "Cannot validator. This is probably a bug in remix-validated-form."
     );
 
-    const { error } = await validator.validate(new FormData(formElement));
-    if (error) get().setFieldErrors(error.fieldErrors);
+    const result = await validator.validate(new FormData(formElement));
+    if (result.error) get().setFieldErrors(result.error.fieldErrors);
+    return result;
+  },
+
+  submit: () => {
+    const formElement = get().formElement;
+    invariant(
+      formElement,
+      "Cannot find reference to form. This is probably a bug in remix-validated-form."
+    );
+
+    formElement.submit();
+  },
+
+  getValues: () => {
+    const formElement = get().formElement;
+    invariant(
+      formElement,
+      "Cannot find reference to form. This is probably a bug in remix-validated-form."
+    );
+
+    return new FormData(formElement);
   },
 
   resetFormElement: () => get().formElement?.reset(),

package/src/unreleased/formStateHooks.ts

@@ -18,8 +18,14 @@ import {
   useSyncedDefaultValues,
   useFormActionProp,
   useFormSubactionProp,
+  useSubmitForm,
+  useFormValues,
 } from "../internal/hooks";
-import { FieldErrors, TouchedFields } from "../validation/types";
+import {
+  FieldErrors,
+  TouchedFields,
+  ValidationResult,
+} from "../validation/types";
 
 export type FormState = {
   fieldErrors: FieldErrors;
@@ -95,7 +101,7 @@ export type FormHelpers = {
   /**
    * Validate the whole form and populate any errors.
    */
-  validate: () => Promise<void>;
+  validate: () => Promise<ValidationResult<unknown>>;
   /**
    * Clears all errors on the form.
    */
@@ -107,6 +113,16 @@ export type FormHelpers = {
    * or clicking a button element with `type="reset"`.
    */
   reset: () => void;
+  /**
+   * Submits the form, running all validations first.
+   *
+   * _Note_: This is equivalent to clicking a button element with `type="submit"` or calling formElement.submit().
+   */
+  submit: () => void;
+  /**
+   * Returns the current form values as FormData
+   */
+  getValues: () => FormData;
 };
 
 /**
@@ -122,6 +138,8 @@ export const useFormHelpers = (formId?: string): FormHelpers => {
   const clearError = useClearError(formContext);
   const setFieldErrors = useSetFieldErrors(formContext.formId);
   const reset = useResetFormElement(formContext.formId);
+  const submit = useSubmitForm(formContext.formId);
+  const getValues = useFormValues(formContext.formId);
   return useMemo(
     () => ({
       setTouched,
@@ -130,7 +148,18 @@ export const useFormHelpers = (formId?: string): FormHelpers => {
       validate,
       clearAllErrors: () => setFieldErrors({}),
       reset,
+      submit,
+      getValues,
     }),
-    [clearError, reset, setFieldErrors, setTouched, validate, validateField]
+    [
+      clearError,
+      reset,
+      setFieldErrors,
+      setTouched,
+      submit,
+      validate,
+      validateField,
+      getValues,
+    ]
   );
 };

package/src/userFacingFormContext.ts

@@ -4,7 +4,11 @@ import {
   useRegisterReceiveFocus,
 } from "./internal/hooks";
 import { useFormHelpers, useFormState } from "./unreleased/formStateHooks";
-import { FieldErrors, TouchedFields } from "./validation/types";
+import {
+  FieldErrors,
+  TouchedFields,
+  ValidationResult,
+} from "./validation/types";
 
 export type FormContextValue = {
   /**
@@ -61,7 +65,7 @@ export type FormContextValue = {
   /**
    * Validate the whole form and populate any errors.
    */
-  validate: () => Promise<void>;
+  validate: () => Promise<ValidationResult<unknown>>;
   /**
    * Clears all errors on the form.
    */
@@ -73,6 +77,16 @@ export type FormContextValue = {
    * or clicking a button element with `type="reset"`.
    */
   reset: () => void;
+  /**
+   * Submits the form, running all validations first.
+   *
+   * _Note_: This is equivalent to clicking a button element with `type="submit"` or calling formElement.submit().
+   */
+  submit: () => void;
+  /**
+   * Returns the current form values as FormData
+   */
+  getValues: () => FormData;
 };
 
 /**
@@ -89,6 +103,8 @@ export const useFormContext = (formId?: string): FormContextValue => {
     clearAllErrors,
     validate,
     reset,
+    submit,
+    getValues,
   } = useFormHelpers(formId);
 
   const registerReceiveFocus = useRegisterReceiveFocus(context.formId);
@@ -112,6 +128,8 @@ export const useFormContext = (formId?: string): FormContextValue => {
       clearAllErrors,
       validate,
       reset,
+      submit,
+      getValues,
     }),
     [
       clearAllErrors,
@@ -120,8 +138,10 @@ export const useFormContext = (formId?: string): FormContextValue => {
       reset,
       setTouched,
       state,
+      submit,
       validate,
       validateField,
+      getValues,
     ]
   );
 };

package/src/validation/validation.test.ts

@@ -56,21 +56,21 @@ const validationTestCases: ValidationTestCase[] = [
     name: "zod",
     validator: withZod(
       z.object({
-        firstName: z.string().nonempty(),
-        lastName: z.string().nonempty(),
+        firstName: z.string().min(1),
+        lastName: z.string().min(1),
         age: z.optional(z.number()),
         address: z.preprocess(
           (value) => (value == null ? {} : value),
           z.object({
-            streetAddress: z.string().nonempty(),
-            city: z.string().nonempty(),
-            country: z.string().nonempty(),
+            streetAddress: z.string().min(1),
+            city: z.string().min(1),
+            country: z.string().min(1),
           })
         ),
         pets: z
           .object({
-            animal: z.string().nonempty(),
-            name: z.string().nonempty(),
+            animal: z.string().min(1),
+            name: z.string().min(1),
           })
           .array()
           .optional(),