remix-validated-form 3.3.1 → 4.0.0-beta.0

package/build/server.js

@@ -4,18 +4,23 @@ exports.validationError = void 0;
 const server_runtime_1 = require("@remix-run/server-runtime");
 /**
  * Takes the errors from a `Validator` and returns a `Response`.
- * The `ValidatedForm` on the frontend will automatically display the errors
- * if this is returned from the action.
+ * When you return this from your action, `ValidatedForm` on the frontend will automatically
+ * display the errors on the correct fields on the correct form.
+ *
+ * _Recommended_: You can also provide a second argument to `validationError`
+ * to specify how to repopulate the form when JS is disabled.
+ *
+ * @example
+ * ```ts
+ * const result = validator.validate(await request.formData());
+ * if (result.error) return validationError(result.error, result.submittedData);
+ * ```
  */
-const validationError = (errors, submittedData) => {
-    if (submittedData) {
-        return (0, server_runtime_1.json)({
-            fieldErrors: {
-                ...errors,
-                _submittedData: submittedData,
-            },
-        }, { status: 422 });
-    }
-    return (0, server_runtime_1.json)({ fieldErrors: errors }, { status: 422 });
-};
+function validationError(error, repopulateFields) {
+    return (0, server_runtime_1.json)({
+        fieldErrors: error.fieldErrors,
+        subaction: error.subaction,
+        repopulateFields,
+    }, { status: 422 });
+}
 exports.validationError = validationError;

package/build/types.d.ts

@@ -0,0 +1 @@
+export declare type ValidationState = "idle" | "validating" | "valid" | "invalid";

package/build/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/validation/createValidator.d.ts

@@ -1,7 +1,7 @@
-import { Validator } from "..";
+import { CreateValidatorArg, Validator } from "..";
 /**
  * Used to create a validator for a form.
  * It provides built-in handling for unflattening nested objects and
  * extracting the values from FormData.
  */
-export declare function createValidator<T>(validator: Validator<T>): Validator<T>;
+export declare function createValidator<T>(validator: CreateValidatorArg<T>): Validator<T>;

package/build/validation/createValidator.js

@@ -16,17 +16,24 @@ const preprocessFormData = (data) => {
  */
 function createValidator(validator) {
     return {
-        validate: (value) => {
+        validate: async (value) => {
             const data = preprocessFormData(value);
-            const result = validator.validate(data);
+            const result = await 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 {
+                    data: undefined,
+                    error: {
+                        fieldErrors: result.error,
+                        subaction: data.subaction,
+                    },
+                    submittedData: data,
+                };
             }
-            return result;
+            return {
+                data: result.data,
+                error: undefined,
+                submittedData: data,
+            };
         },
         validateField: (data, field) => validator.validateField(preprocessFormData(data), field),
     };

package/build/validation/types.d.ts

@@ -1,21 +1,32 @@
 export declare type FieldErrors = Record<string, string>;
 export declare type TouchedFields = Record<string, boolean>;
-export declare type FieldErrorsWithData = FieldErrors & {
-    _submittedData: any;
-};
 export declare type GenericObject = {
     [key: string]: any;
 };
-/**
- * The result when validating a form.
- */
-export declare type ValidationResult<DataType> = {
+export declare type ValidatorError = {
+    subaction?: string;
+    fieldErrors: FieldErrors;
+};
+export declare type ValidationErrorResponseData = {
+    subaction?: string;
+    fieldErrors: FieldErrors;
+    repopulateFields?: unknown;
+};
+export declare type BaseResult = {
+    submittedData: GenericObject;
+};
+export declare type ErrorResult = BaseResult & {
+    error: ValidatorError;
+    data: undefined;
+};
+export declare type SuccessResult<DataType> = BaseResult & {
     data: DataType;
     error: undefined;
-} | {
-    error: FieldErrors;
-    data: undefined;
 };
+/**
+ * The result when validating a form.
+ */
+export declare type ValidationResult<DataType> = SuccessResult<DataType> | ErrorResult;
 /**
  * The result when validating an individual field in a form.
  */
@@ -26,7 +37,19 @@ export declare type ValidateFieldResult = {
  * A `Validator` can be passed to the `validator` prop of a `ValidatedForm`.
  */
 export declare type Validator<DataType> = {
-    validate: (unvalidatedData: GenericObject) => ValidationResult<DataType>;
-    validateField: (unvalidatedData: GenericObject, field: string) => ValidateFieldResult;
+    validate: (unvalidatedData: GenericObject) => Promise<ValidationResult<DataType>>;
+    validateField: (unvalidatedData: GenericObject, field: string) => Promise<ValidateFieldResult>;
+};
+export declare type Valid<DataType> = {
+    data: DataType;
+    error: undefined;
+};
+export declare type Invalid = {
+    error: FieldErrors;
+    data: undefined;
+};
+export declare type CreateValidatorArg<DataType> = {
+    validate: (unvalidatedData: GenericObject) => Promise<Valid<DataType> | Invalid>;
+    validateField: (unvalidatedData: GenericObject, field: string) => Promise<ValidateFieldResult>;
 };
 export declare type ValidatorData<T extends Validator<any>> = T extends Validator<infer U> ? U : never;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "3.3.1",
+  "version": "4.0.0-beta.0",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",

package/src/ValidatedForm.tsx

@@ -3,8 +3,10 @@ import {
   useActionData,
   useFetcher,
   useFormAction,
+  useSubmit,
   useTransition,
 } from "@remix-run/react";
+import uniq from "lodash/uniq";
 import React, {
   ComponentProps,
   useEffect,
@@ -20,8 +22,8 @@ import { omit, mergeRefs } from "./internal/util";
 import {
   FieldErrors,
   Validator,
-  FieldErrorsWithData,
   TouchedFields,
+  ValidationErrorResponseData,
 } from "./validation/types";
 
 export type FormProps<DataType> = {
@@ -33,7 +35,10 @@ export type FormProps<DataType> = {
    * A submit callback that gets called when the form is submitted
    * after all validations have been run.
    */
-  onSubmit?: (data: DataType, event: React.FormEvent<HTMLFormElement>) => void;
+  onSubmit?: (
+    data: DataType,
+    event: React.FormEvent<HTMLFormElement>
+  ) => Promise<void>;
   /**
    * Allows you to provide a `fetcher` from remix's `useFetcher` hook.
    * The form will use the fetcher for loading states, action data, etc
@@ -68,25 +73,27 @@ export type FormProps<DataType> = {
   disableFocusOnError?: boolean;
 } & Omit<ComponentProps<typeof RemixForm>, "onSubmit">;
 
-function useFieldErrorsFromBackend(
+function useErrorResponseForThisForm(
   fetcher?: ReturnType<typeof useFetcher>,
   subaction?: string
-): FieldErrorsWithData | null {
+): ValidationErrorResponseData | null {
   const actionData = useActionData<any>();
-  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;
+  if (fetcher) {
+    if ((fetcher.data as any)?.fieldErrors) return fetcher.data as any;
+    return null;
   }
+
+  if (!actionData?.fieldErrors) return null;
+  if (
+    (!subaction && !actionData.subaction) ||
+    actionData.subaction === subaction
+  )
+    return actionData;
   return null;
 }
 
 function useFieldErrors(
-  fieldErrorsFromBackend?: any
+  fieldErrorsFromBackend?: FieldErrors
 ): [FieldErrors, React.Dispatch<React.SetStateAction<FieldErrors>>] {
   const [fieldErrors, setFieldErrors] = useState<FieldErrors>(
     fieldErrorsFromBackend ?? {}
@@ -136,11 +143,14 @@ const getDataFromForm = (el: HTMLFormElement) => new FormData(el);
  * and only if JS is disabled.
  */
 function useDefaultValues<DataType>(
-  fieldErrors?: FieldErrorsWithData | null,
+  repopulateFieldsFromBackend?: any,
   defaultValues?: Partial<DataType>
 ) {
-  const defaultsFromValidationError = fieldErrors?._submittedData;
-  return defaultsFromValidationError ?? defaultValues;
+  return repopulateFieldsFromBackend ?? defaultValues;
+}
+
+function nonNull<T>(value: T | null | undefined): value is T {
+  return value !== null;
 }
 
 const focusFirstInvalidInput = (
@@ -148,28 +158,48 @@ const focusFirstInvalidInput = (
   customFocusHandlers: MultiValueMap<string, () => void>,
   formElement: HTMLFormElement
 ) => {
-  const invalidInputSelector = Object.keys(fieldErrors)
-    .map((fieldName) => `input[name="${fieldName}"]`)
-    .join(",");
-  const invalidInputs = formElement.querySelectorAll(invalidInputSelector);
-  for (const element of invalidInputs) {
-    const input = element as HTMLInputElement;
+  const namesInOrder = [...formElement.elements]
+    .map((el) => {
+      const input = el instanceof RadioNodeList ? el[0] : el;
+      if (input instanceof HTMLInputElement) return input.name;
+      return null;
+    })
+    .filter(nonNull)
+    .filter((name) => name in fieldErrors);
+  const uniqueNamesInOrder = uniq(namesInOrder);
 
-    if (customFocusHandlers.has(input.name)) {
-      customFocusHandlers.getAll(input.name).forEach((handler) => {
+  for (const fieldName of uniqueNamesInOrder) {
+    if (customFocusHandlers.has(fieldName)) {
+      customFocusHandlers.getAll(fieldName).forEach((handler) => {
         handler();
       });
       break;
     }
 
-    // We don't filter these out ahead of time because
-    // they could have a custom focus handler
-    if (input.type === "hidden") {
-      continue;
+    const elem = formElement.elements.namedItem(fieldName);
+    if (!elem) continue;
+
+    if (elem instanceof RadioNodeList) {
+      const selectedRadio =
+        [...elem]
+          .filter(
+            (item): item is HTMLInputElement => item instanceof HTMLInputElement
+          )
+          .find((item) => item.value === elem.value) ?? elem[0];
+      if (selectedRadio && selectedRadio instanceof HTMLInputElement) {
+        selectedRadio.focus();
+        break;
+      }
     }
 
-    input.focus();
-    break;
+    if (elem instanceof HTMLInputElement) {
+      if (elem.type === "hidden") {
+        continue;
+      }
+
+      elem.focus();
+      break;
+    }
   }
 };
 
@@ -190,15 +220,21 @@ export function ValidatedForm<DataType>({
   disableFocusOnError,
   ...rest
 }: FormProps<DataType>) {
-  const fieldErrorsFromBackend = useFieldErrorsFromBackend(fetcher, subaction);
-  const [fieldErrors, setFieldErrors] = useFieldErrors(fieldErrorsFromBackend);
+  const backendError = useErrorResponseForThisForm(fetcher, subaction);
+  const [fieldErrors, setFieldErrors] = useFieldErrors(
+    backendError?.fieldErrors
+  );
   const isSubmitting = useIsSubmitting(action, subaction, fetcher);
-  const defaultsToUse = useDefaultValues(fieldErrorsFromBackend, defaultValues);
+  const defaultsToUse = useDefaultValues(
+    backendError?.repopulateFields,
+    defaultValues
+  );
   const [touchedFields, setTouchedFields] = useState<TouchedFields>({});
   const [hasBeenSubmitted, setHasBeenSubmitted] = useState(false);
+  const submit = useSubmit();
   const formRef = useRef<HTMLFormElement>(null);
   useSubmitComplete(isSubmitting, () => {
-    if (!fieldErrorsFromBackend && resetAfterSubmit) {
+    if (!backendError && resetAfterSubmit) {
       formRef.current?.reset();
     }
   });
@@ -220,9 +256,9 @@ export function ValidatedForm<DataType>({
       clearError: (fieldName) => {
         setFieldErrors((prev) => omit(prev, fieldName));
       },
-      validateField: (fieldName) => {
+      validateField: async (fieldName) => {
         invariant(formRef.current, "Cannot find reference to form");
-        const { error } = validator.validateField(
+        const { error } = await validator.validateField(
           getDataFromForm(formRef.current),
           fieldName as any
         );
@@ -237,11 +273,13 @@ export function ValidatedForm<DataType>({
               [fieldName]: error,
             };
           });
+          return error;
         } else {
           setFieldErrors((prev) => {
             if (!(fieldName in prev)) return prev;
             return omit(prev, fieldName);
           });
+          return null;
         }
       },
       registerReceiveFocus: (fieldName, handler) => {
@@ -267,26 +305,58 @@ export function ValidatedForm<DataType>({
 
   const Form = fetcher?.Form ?? RemixForm;
 
+  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);
+    return () => {
+      window.removeEventListener("click", handleClick);
+    };
+  }, []);
+
   return (
     <Form
       ref={mergeRefs([formRef, formRefProp])}
       {...rest}
       action={action}
-      onSubmit={(event) => {
+      onSubmit={async (e) => {
+        e.preventDefault();
         setHasBeenSubmitted(true);
-        const result = validator.validate(getDataFromForm(event.currentTarget));
+        const result = await validator.validate(
+          getDataFromForm(e.currentTarget)
+        );
         if (result.error) {
-          event.preventDefault();
-          setFieldErrors(result.error);
+          setFieldErrors(result.error.fieldErrors);
           if (!disableFocusOnError) {
             focusFirstInvalidInput(
-              result.error,
+              result.error.fieldErrors,
               customFocusHandlers(),
               formRef.current!
             );
           }
         } else {
-          onSubmit?.(result.data, event);
+          onSubmit && onSubmit(result.data, e);
+          if (fetcher)
+            fetcher.submit(clickedButtonRef.current || e.currentTarget);
+          else submit(clickedButtonRef.current || e.currentTarget);
+          clickedButtonRef.current = null;
         }
       }}
       onReset={(event) => {

package/src/hooks.ts

@@ -1,12 +1,22 @@
 import get from "lodash/get";
 import toPath from "lodash/toPath";
-import { useContext, useEffect, useMemo } from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
 import { FormContext } from "./internal/formContext";
 import {
   createGetInputProps,
   GetInputProps,
   ValidationBehaviorOptions,
 } from "./internal/getInputProps";
+import { ValidationState } from "./types";
+
+const useInternalFormContext = (hookName: string) => {
+  const context = useContext(FormContext);
+  if (!context)
+    throw new Error(
+      `${hookName} must be used within a ValidatedForm component`
+    );
+  return context;
+};
 
 export type FieldProps = {
   /**
@@ -21,6 +31,14 @@ export type FieldProps = {
    * Validates the field.
    */
   validate: () => void;
+  /**
+   * The validation state of the field.
+   * - idle: the field has not been validated yet.
+   * - validating: the field is currently being validated.
+   * - valid: the field is valid.
+   * - invalid: the field is invalid.
+   */
+  validationState: ValidationState;
   /**
    * The default value of the field, if there is one.
    */
@@ -66,10 +84,11 @@ export const useField = (
     touchedFields,
     setFieldTouched,
     hasBeenSubmitted,
-  } = useContext(FormContext);
+  } = useInternalFormContext("useField");
 
   const isTouched = !!touchedFields[name];
   const { handleReceiveFocus } = options ?? {};
+  const [isValidating, setValidating] = useState(false);
 
   useEffect(() => {
     if (handleReceiveFocus)
@@ -77,17 +96,28 @@ export const useField = (
   }, [handleReceiveFocus, name, registerReceiveFocus]);
 
   const field = useMemo<FieldProps>(() => {
+    const error = fieldErrors[name];
+    const getValidationState = (): ValidationState => {
+      if (isValidating) return "validating";
+      if (error) return "invalid";
+      if (!isTouched && !hasBeenSubmitted) return "idle";
+      return "valid";
+    };
     const helpers = {
-      error: fieldErrors[name],
+      error,
       clearError: () => {
         clearError(name);
       },
-      validate: () => validateField(name),
+      validate: () => {
+        setValidating(true);
+        validateField(name).then((error) => setValidating(false));
+      },
       defaultValue: defaultValues
         ? get(defaultValues, toPath(name), undefined)
         : undefined,
       touched: isTouched,
       setTouched: (touched: boolean) => setFieldTouched(name, touched),
+      validationState: getValidationState(),
     };
     const getInputProps = createGetInputProps({
       ...helpers,
@@ -106,6 +136,7 @@ export const useField = (
     isTouched,
     hasBeenSubmitted,
     options?.validationBehavior,
+    isValidating,
     clearError,
     validateField,
     setFieldTouched,
@@ -116,13 +147,18 @@ export const useField = (
 
 /**
  * Provides access to the entire form context.
- * This is not usually necessary, but can be useful for advanced use cases.
  */
-export const useFormContext = () => useContext(FormContext);
+export const useFormContext = () => useInternalFormContext("useFormContext");
 
 /**
  * Returns whether or not the parent form is currently being submitted.
  * This is different from remix's `useTransition().submission` in that it
  * is aware of what form it's in and when _that_ form is being submitted.
  */
-export const useIsSubmitting = () => useFormContext().isSubmitting;
+export const useIsSubmitting = () =>
+  useInternalFormContext("useIsSubmitting").isSubmitting;
+
+/**
+ * Returns whether or not the current form is valid.
+ */
+export const useIsValid = () => useInternalFormContext("useIsValid").isValid;

package/src/internal/flatten.ts

@@ -1,12 +1,4 @@
-// `flatten` is taken from https://github.com/richie5um/FlattenJS. Decided to implement them here instead of using that package because this is a core functionality of the library and this will add more flexibility in case we need to change the implementation.
-import assign from "lodash/assign";
-import isArray from "lodash/isArray";
-import isObject from "lodash/isObject";
-import keys from "lodash/keys";
-import mapKeys from "lodash/mapKeys";
 import set from "lodash/set";
-import transform from "lodash/transform";
-import { GenericObject } from "..";
 import { MultiValueMap } from "./MultiValueMap";
 
 export const objectFromPathEntries = (entries: [string, any][]) => {
@@ -17,39 +9,3 @@ export const objectFromPathEntries = (entries: [string, any][]) => {
     {}
   );
 };
-
-/** Flatten an object so there are no nested objects or arrays */
-export function flatten(obj: GenericObject, preserveEmpty = false) {
-  return transform(
-    obj,
-    function (result: GenericObject, value, key) {
-      if (isObject(value)) {
-        let flatMap = mapKeys(
-          flatten(value, preserveEmpty),
-          function (_mvalue, mkey) {
-            if (isArray(value)) {
-              let index = mkey.indexOf(".");
-              if (-1 !== index) {
-                return `${key}[${mkey.slice(0, index)}]${mkey.slice(index)}`;
-              }
-              return `${key}[${mkey}]`;
-            }
-            return `${key}.${mkey}`;
-          }
-        );
-
-        assign(result, flatMap);
-
-        // Preverve Empty arrays and objects
-        if (preserveEmpty && keys(flatMap).length === 0) {
-          result[key] = value;
-        }
-      } else {
-        result[key] = value;
-      }
-
-      return result;
-    },
-    {}
-  );
-}

package/src/internal/formContext.ts

@@ -13,7 +13,7 @@ export type FormContextValue = {
   /**
    * Validate the specified field.
    */
-  validateField: (fieldName: string) => void;
+  validateField: (fieldName: string) => Promise<string | null>;
   /**
    * The `action` prop of the form.
    */
@@ -30,7 +30,6 @@ export type FormContextValue = {
   hasBeenSubmitted: boolean;
   /**
    * Whether or not the form is valid.
-   * This is a shortcut for `Object.keys(fieldErrors).length === 0`.
    */
   isValid: boolean;
   /**
@@ -52,14 +51,4 @@ export type FormContextValue = {
   setFieldTouched: (fieldName: string, touched: boolean) => void;
 };
 
-export const FormContext = createContext<FormContextValue>({
-  fieldErrors: {},
-  clearError: () => {},
-  validateField: () => {},
-  isSubmitting: false,
-  hasBeenSubmitted: false,
-  isValid: true,
-  registerReceiveFocus: () => () => {},
-  touchedFields: {},
-  setFieldTouched: () => {},
-});
+export const FormContext = createContext<FormContextValue | null>(null);