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

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/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);

package/src/server.ts

@@ -1,26 +1,33 @@
 import { json } from "@remix-run/server-runtime";
-import { FieldErrors } from "./validation/types";
+import {
+  ValidatorError,
+  ValidationErrorResponseData,
+} from "./validation/types";
 
 /**
  * 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);
+ * ```
  */
-export const validationError = (
-  errors: FieldErrors,
-  submittedData?: unknown
-) => {
-  if (submittedData) {
-    return json(
-      {
-        fieldErrors: {
-          ...errors,
-          _submittedData: submittedData,
-        },
-      },
-      { status: 422 }
-    );
-  }
-
-  return json({ fieldErrors: errors }, { status: 422 });
-};
+export function validationError(
+  error: ValidatorError,
+  repopulateFields?: unknown
+): Response {
+  return json<ValidationErrorResponseData>(
+    {
+      fieldErrors: error.fieldErrors,
+      subaction: error.subaction,
+      repopulateFields,
+    },
+    { status: 422 }
+  );
+}

package/src/types.ts

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

package/src/validation/createValidator.ts

@@ -1,4 +1,4 @@
-import { GenericObject, Validator } from "..";
+import { CreateValidatorArg, GenericObject, Validator } from "..";
 import { objectFromPathEntries } from "../internal/flatten";
 
 const preprocessFormData = (data: GenericObject | FormData): GenericObject => {
@@ -14,19 +14,30 @@ const preprocessFormData = (data: GenericObject | FormData): GenericObject => {
  * It provides built-in handling for unflattening nested objects and
  * extracting the values from FormData.
  */
-export function createValidator<T>(validator: Validator<T>): Validator<T> {
+export function createValidator<T>(
+  validator: CreateValidatorArg<T>
+): Validator<T> {
   return {
-    validate: (value: GenericObject | FormData) => {
+    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 as any;
+        return {
+          data: undefined,
+          error: {
+            fieldErrors: result.error,
+            subaction: data.subaction,
+          },
+          submittedData: data,
+        };
       }
-      return result;
+
+      return {
+        data: result.data,
+        error: undefined,
+        submittedData: data,
+      };
     },
     validateField: (data: GenericObject | FormData, field: string) =>
       validator.validateField(preprocessFormData(data), field),

package/src/validation/types.ts

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