Accumulating all form validation errors

[tamoreton]

I've run into an issue where I need to know if there are any validation errors in the entire form so that I can render a summary of all the errors. Here is a minimal reproducible example slightly modified from the homepage of the docs:

import { useForm } from "@conform-to/react";
import { parse } from "@conform-to/zod";
import { json, redirect, type ActionArgs } from "@remix-run/node";
import { Form, useActionData } from "@remix-run/react";
import { z } from "zod";

import { ErrorSummary } from "~/components/ErrorSummary";

const schema = z.object({
  email: z.string().min(1, "Email is required").email("Email is invalid"),
  password: z.string().min(1, "Password is required"),
});

export async function action({ request }: ActionArgs) {
  const formData = await request.formData();
  const submission = parse(formData, { schema });

  if (!submission.value || submission.intent !== "submit") {
    return json(submission, { status: 400 });
  }

  console.debug(submission.value); // DEBUG

  return redirect("/dashboard");
}

export default function LoginForm() {
  const lastSubmission = useActionData<typeof action>();
  const [form, { email, password }] = useForm({
    lastSubmission,
    onValidate({ formData }) {
      return parse(formData, { schema });
    },
  });

  return (
    <Form method="post" {...form.props}>
      {form.errors.length > 0 && ( // Doesn't work
        <ErrorSummary
          titleChildren="There is a problem"
          errorList={form.errors.map((field) => ({
            children: field.error,
            href: `#${field.id}`,
          }))}
        />
      )}

      {lastSubmission &&
        lastSubmission.error && ( // Also doesn't work
          <ErrorSummary
            titleChildren="There is a problem"
            errorList={Object.keys(lastSubmission.error).map((field) => ({
              children: lastSubmission.error[field],
              href: `#${field}-input-error`,
            }))}
          />
        )}

      <div>
        <label>Email</label>
        <input type="email" name={email.name} />
        <div>{email.error}</div>
      </div>
      <div>
        <label>Password</label>
        <input type="password" name={password.name} />
        <div>{password.error}</div>
      </div>
      <button>Login</button>
    </Form>
  );
}

In my current implementation, each form field has its own validation errors. While I can check each field for errors individually, doing so is not ideal, especially when the form becomes large. What I'd like to do is to check if the form has any errors in one go, something like form.hasErrors() or even a form.errors property at the form level.

Is there an existing method or property in the Conform library that would allow me to do this? If not, I think this would be a great feature to add. It would make it easier to handle form-wide validation scenarios and improve the library's ease of use.

[edmundhung]

Hi @tamoreton,

There is no easy way to gather all errors in one place at the moment. You will need to aggregate the error from individual field manually. (e.g. const allErrors = [].concat(form.errors, email.errors, password.errors)). But this is definitely a scenario I want to support. I will keep this in mind when I work on it (soon!). Thanks for raising this up :)

[chopfitzroy]

Is this possible in the version 1 release?

[edmundhung]

Yep. You now have access to form.allErrors

[chopfitzroy]

Yep, I was actually seeing #391 which was causing allErrors to either be {} or only contain the error for a single field. Removing z.preprocess resolved the issue.