feat(conform-react,conform-zod,conform-yup)!: multiple errors by defa…

…ult (#228)
edmundhung · Jul 18, 2023 · 217af69 · 217af69
1 parent a1e0bd5
commit 217af69
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 179 deletions.
diff --git a/packages/conform-react/hooks.ts b/packages/conform-react/hooks.ts
@@ -1052,15 +1052,6 @@ export function validateConstraint(options: {
 			context: { formData: FormData; attributeValue: string },
 		) => boolean
 	>;
-	acceptMultipleErrors?: ({
-		name,
-		intent,
-		payload,
-	}: {
-		name: string;
-		intent: string;
-		payload: Record<string, any>;
-	}) => boolean;
 	formatMessages?: ({
 		name,
 		validity,
@@ -1138,15 +1129,9 @@ export function validateConstraint(options: {
 						constraint,
 						defaultErrors: getDefaultErrors(element.validity, constraint),
 					});
-					const shouldAcceptMultipleErrors =
-						options?.acceptMultipleErrors?.({
-							name,
-							payload,
-							intent,
-						}) ?? false;
 
 					if (errors.length > 0) {
-						error[name] = shouldAcceptMultipleErrors ? errors : errors[0];
+						error[name] = errors;
 					}
 				}
 			}

diff --git a/packages/conform-yup/index.ts b/packages/conform-yup/index.ts
@@ -91,47 +91,20 @@ export function parse<Schema extends yup.AnyObjectSchema>(
 	payload: FormData | URLSearchParams,
 	config: {
 		schema: Schema | ((intent: string) => Schema);
-		acceptMultipleErrors?: ({
-			name,
-			intent,
-			payload,
-		}: {
-			name: string;
-			intent: string;
-			payload: Record<string, any>;
-		}) => boolean;
 		async?: false;
 	},
 ): Submission<yup.InferType<Schema>>;
 export function parse<Schema extends yup.AnyObjectSchema>(
 	payload: FormData | URLSearchParams,
 	config: {
 		schema: Schema | ((intent: string) => Schema);
-		acceptMultipleErrors?: ({
-			name,
-			intent,
-			payload,
-		}: {
-			name: string;
-			intent: string;
-			payload: Record<string, any>;
-		}) => boolean;
 		async: true;
 	},
 ): Promise<Submission<yup.InferType<Schema>>>;
 export function parse<Schema extends yup.AnyObjectSchema>(
 	payload: FormData | URLSearchParams,
 	config: {
 		schema: Schema | ((intent: string) => Schema);
-		acceptMultipleErrors?: ({
-			name,
-			intent,
-			payload,
-		}: {
-			name: string;
-			intent: string;
-			payload: Record<string, any>;
-		}) => boolean;
 		async?: boolean;
 	},
 ):
@@ -153,9 +126,7 @@ export function parse<Schema extends yup.AnyObjectSchema>(
 
 								if (typeof result[name] === 'undefined') {
 									result[name] = e.message;
-								} else if (
-									config.acceptMultipleErrors?.({ name, intent, payload })
-								) {
+								} else {
 									result[name] = ([] as string[]).concat(
 										result[name],
 										e.message,

diff --git a/packages/conform-zod/index.ts b/packages/conform-zod/index.ts
@@ -174,15 +174,6 @@ export function parse<Schema extends z.ZodTypeAny>(
 	payload: FormData | URLSearchParams,
 	config: {
 		schema: Schema | ((intent: string) => Schema);
-		acceptMultipleErrors?: ({
-			name,
-			intent,
-			payload,
-		}: {
-			name: string;
-			intent: string;
-			payload: Record<string, any>;
-		}) => boolean;
 		async?: false;
 		errorMap?: z.ZodErrorMap;
 		stripEmptyValue?: boolean;
@@ -192,15 +183,6 @@ export function parse<Schema extends z.ZodTypeAny>(
 	payload: FormData | URLSearchParams,
 	config: {
 		schema: Schema | ((intent: string) => Schema);
-		acceptMultipleErrors?: ({
-			name,
-			intent,
-			payload,
-		}: {
-			name: string;
-			intent: string;
-			payload: Record<string, any>;
-		}) => boolean;
 		async: true;
 		errorMap?: z.ZodErrorMap;
 		stripEmptyValue?: boolean;
@@ -210,15 +192,6 @@ export function parse<Schema extends z.ZodTypeAny>(
 	payload: FormData | URLSearchParams,
 	config: {
 		schema: Schema | ((intent: string) => Schema);
-		acceptMultipleErrors?: ({
-			name,
-			intent,
-			payload,
-		}: {
-			name: string;
-			intent: string;
-			payload: Record<string, any>;
-		}) => boolean;
 		async?: boolean;
 		errorMap?: z.ZodErrorMap;
 		stripEmptyValue?: boolean;
@@ -249,9 +222,7 @@ export function parse<Schema extends z.ZodTypeAny>(
 
 							if (typeof result[name] === 'undefined') {
 								result[name] = e.message;
-							} else if (
-								config.acceptMultipleErrors?.({ name, intent, payload })
-							) {
+							} else {
 								result[name] = ([] as string[]).concat(result[name], e.message);
 							}
 

diff --git a/playground/app/routes/async-validation.tsx b/playground/app/routes/async-validation.tsx
@@ -15,14 +15,23 @@ function createSchema(
 	return z.object({
 		email: z
 			.string({ required_error: 'Email is required' })
-			.email('Email is invalid')
-			.superRefine((email, ctx) =>
-				refine(ctx, {
+			.superRefine((email, ctx) => {
+				const result = z.string().email().safeParse(email);
+
+				if (!result.success) {
+					ctx.addIssue({
+						code: z.ZodIssueCode.custom,
+						message: 'Email is invalid',
+					});
+					return;
+				}
+
+				return refine(ctx, {
 					validate: () => constraints.isEmailUnique?.(email),
 					when: intent === 'validate/email' || intent === 'submit',
 					message: 'Email is already used',
-				}),
-			),
+				});
+			}),
 		title: z
 			.string({ required_error: 'Title is required' })
 			.max(20, 'Title is too long'),

diff --git a/playground/app/routes/multiple-errors.tsx b/playground/app/routes/multiple-errors.tsx
@@ -40,9 +40,6 @@ function parseForm(formData: FormData, validator: string | null) {
 							(username) => !username || username.match(/[0-9]/) !== null,
 						),
 				}),
-				acceptMultipleErrors({ name }) {
-					return name === 'username';
-				},
 			});
 		}
 		case 'zod': {
@@ -61,9 +58,6 @@ function parseForm(formData: FormData, validator: string | null) {
 						)
 						.refine((username) => username.match(/[0-9]/), 'At least 1 number'),
 				}),
-				acceptMultipleErrors({ name }) {
-					return name === 'username';
-				},
 			});
 		}
 		default: {

diff --git a/playground/app/routes/validate-constraint.tsx b/playground/app/routes/validate-constraint.tsx
@@ -18,8 +18,6 @@ export async function loader({ request }: LoaderArgs) {
 	const url = new URL(request.url);
 
 	return {
-		multiplePasswordError:
-			url.searchParams.get('multiplePasswordError') === 'yes',
 		enableCustomMessage: url.searchParams.get('enableCustomMessage') === 'yes',
 	};
 }
@@ -28,8 +26,7 @@ export default function Example() {
 	const [lastSubmission, setLastSubmission] = useState<
 		Submission | undefined
 	>();
-	const { multiplePasswordError, enableCustomMessage } =
-		useLoaderData<typeof loader>();
+	const { enableCustomMessage } = useLoaderData<typeof loader>();
 	const [form, { email, password, confirmPassword }] = useForm<Schema>({
 		fallbackNative: true,
 		shouldRevalidate: 'onInput',
@@ -41,9 +38,6 @@ export default function Example() {
 						return value === formData.get(attributeValue);
 					},
 				},
-				acceptMultipleErrors({ name }) {
-					return multiplePasswordError && name === 'password';
-				},
 				formatMessages({ name, defaultErrors }) {
 					if (!enableCustomMessage) {
 						return defaultErrors;

diff --git a/tests/conform-yup.spec.ts b/tests/conform-yup.spec.ts
@@ -62,8 +62,8 @@ test.describe('conform-yup', () => {
 		list: [{ key: '' }],
 	};
 	const error = {
-		text: 'min',
-		tag: 'required',
+		text: ['min', 'regex'],
+		tag: ['required', 'invalid'],
 		number: 'max',
 		timestamp: 'min',
 		'options[1]': 'invalid',
@@ -116,29 +116,5 @@ test.describe('conform-yup', () => {
 			payload,
 			error,
 		});
-		expect(
-			parse(formData, { schema, acceptMultipleErrors: () => true }),
-		).toEqual({
-			intent: 'submit',
-			payload,
-			error: {
-				...error,
-				text: ['min', 'regex'],
-				tag: ['required', 'invalid'],
-			},
-		});
-		expect(
-			parse(formData, {
-				schema,
-				acceptMultipleErrors: ({ name }) => name === 'tag',
-			}),
-		).toEqual({
-			intent: 'submit',
-			payload,
-			error: {
-				...error,
-				tag: ['required', 'invalid'],
-			},
-		});
 	});
 });
diff --git a/tests/conform-zod.spec.ts b/tests/conform-zod.spec.ts
@@ -212,7 +212,7 @@ test.describe('conform-zod', () => {
 			list: [{ key: undefined }],
 		};
 		const error = {
-			text: 'min',
+			text: ['min', 'regex', 'refine'],
 			number: 'step',
 			timestamp: 'min',
 			options: 'min',
@@ -230,31 +230,6 @@ test.describe('conform-zod', () => {
 			payload,
 			error,
 		});
-		expect(
-			parse(formData, {
-				schema,
-				stripEmptyValue: true,
-				acceptMultipleErrors: () => false,
-			}),
-		).toEqual({
-			intent: 'submit',
-			payload,
-			error,
-		});
-		expect(
-			parse(formData, {
-				schema,
-				stripEmptyValue: true,
-				acceptMultipleErrors: () => true,
-			}),
-		).toEqual({
-			intent: 'submit',
-			payload,
-			error: {
-				...error,
-				text: ['min', 'regex', 'refine'],
-			},
-		});
 	});
 
 	test('parse without empty value stripped', () => {
@@ -282,7 +257,7 @@ test.describe('conform-zod', () => {
 			list: [{ key: '' }],
 		};
 		const error = {
-			text: 'min',
+			text: ['min', 'regex', 'refine'],
 			number: 'step',
 			timestamp: 'min',
 			options: 'min',
@@ -301,31 +276,6 @@ test.describe('conform-zod', () => {
 			payload,
 			error,
 		});
-		expect(
-			parse(formData, {
-				schema,
-				stripEmptyValue: false,
-				acceptMultipleErrors: () => false,
-			}),
-		).toEqual({
-			intent: 'submit',
-			payload,
-			error,
-		});
-		expect(
-			parse(formData, {
-				schema,
-				stripEmptyValue: false,
-				acceptMultipleErrors: () => true,
-			}),
-		).toEqual({
-			intent: 'submit',
-			payload,
-			error: {
-				...error,
-				text: ['min', 'regex', 'refine'],
-			},
-		});
 	});
 
 	test('parse with errorMap', () => {