Accumulating all form validation errors #232
-
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 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. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
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. |
Beta Was this translation helpful? Give feedback.
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 :)