How to use my translations in validation messages using zod in sveltekit

[peterknijff]

Hi there,

I'm trying to find a solution on how to make translated validation messages work on my forms using zod in my sveltekit project.
I can define translations in my zod schema, they work for the default domain but when changing the URL to /de for instance, I still get validation messages in the default language instead of the chosen one. Every other translation that are defined on the page itself work fine.

I think this has to do with the fact that in my schema, I do not have any context of what the current language is.
Does someone has a clue on how to make this work?

[samuelstroschein]

Can you show code on how you are using messages in zod?

[peterknijff]

Certainly, this is what my userSchema looks like (I narrowed it down a bit):

// /src/lib/schemas/user.ts

import { z } from 'zod';
import * as m from '$lib/paraglide/messages.js'

export const userSchema = z.object({
	email: z
		.string({ required_error: m.validation_required_field() })
		.email({ message: m.validation_invalid_email() }),
	password: z
		.string({ required_error: m.validation_required_field() })
		.min(6, { message: m.validation_min_length_6() })
		.trim()
});

export type UserSchema = typeof userSchema;

// /src/routes/+page.server.ts
import { superValidate } from 'sveltekit-superforms';
import { userSchema } from '$lib/schemas/user';
import { zod } from 'sveltekit-superforms/adapters';

const resetPasswordSchema = userSchema.pick({ email: true });

export const load = async (event: RequestEvent) => {
	return {
		form: await superValidate(event, zod(resetPasswordSchema))
	};
};

// /src/routes/+page.svelte

<script lang="ts">
	import PasswordResetForm from '$lib/templates/forms/auth/PasswordReset.svelte';
	import type { PageData } from './$types';
	
	/** @type {import("./$types").PageData} */
	export let data: PageData;
</script>

<PasswordResetForm data={data.form} />

// /src/lib/templates/forms/auth/PasswordReset.svelte
<script lang="ts">
	import * as m from '$lib/paraglide/messages.js';
	import * as Form from '$lib/components/ui/form';
	import { Input } from '$lib/components/ui/input';
	import { userSchema, type UserSchema } from '$lib/schemas/user';
	import { superForm } from "sveltekit-superforms";
	import type { Infer, SuperValidated } from 'sveltekit-superforms';
	import { zodClient } from 'sveltekit-superforms/adapters';

	const resetPasswordSchema = userSchema.pick({ email: true });

	type EmailValidation = Pick<Infer<UserSchema>, 'email'>;
	export let data: SuperValidated<EmailValidation>;

	const form = superForm(data, {
		id: 'reset-password',
		taintedMessage: null,
		resetForm: true,
		validators: zodClient(resetPasswordSchema),
		delayMs: 0
	});

	const { form: formData, enhance } = form;
</script>

<form class="space-y-6" method="POST" use:enhance>
	<Form.Field {form} name="email">
		<Form.Control let:attrs>
			<Form.Label>{m.email_address()}</Form.Label>
			<Input {...attrs} bind:value={$formData.email} />
		</Form.Control>
		<Form.FieldErrors />
	</Form.Field>
	<Form.Button class="w-full">{m.action_reset_password()}</Form.Button>
</form>

[samuelstroschein]

The problem is that you are calling a message while you create the zob object.

As example, both m.validation_required_field and m.validation_invalid_emailare called when the userSchema is first created and return the language the user currently selected.

export const userSchema = z.object({
	email: z
+		.string({ required_error: m.validation_required_field() })
+		.email({ message: m.validation_invalid_email() }),
});

Assuming that the selected language of the user is English at the time where the userSchema is created, here is what your schema looks like:

export const userSchema = z.object({
	email: z
+		.string({ required_error: "this is a required field" })
+		.email({ message: "enter your email" }),
});

You could fix this by not calling the message function and defer selecting the language until the error message will be displayed to the user.

export const userSchema = z.object({
	email: z
-		.string({ required_error: m.validation_required_field() })
+		.string({ required_error: m.validation_required_field })
-		.email({ message: m.validation_invalid_email() }),
+		.email({ message: m.validation_invalid_email }),
});

When you display the error message to the user, you need to call the error message function now. By calling the error message function, the function will return the currently selected error message.

// pseudocode
const validate = z.parse(userSchema, user)
if (validate.error){
  console.log(validate.errorMessage())
}

Does that work for you?

[peterknijff]

Although this does work, it is not the right solution for me. Zod is expecting a string when defining messages directly inside the schema. As well as my error component which is based on the FormErrors component from formsnap.

I looked into something different, Zod offers a setErrorMap function. I was inspired by an existing solution to translate zod messages for i18next zod-i18n.

I now create and set the global errorMap once in my layout's onMount function. Although not ideal, it works. Do you, from your experience, see any concerns doing it in this way?

I was rather hoping to set it in a earlier stage, like the hooks.server.ts file for instance, that didn't work, messages turned undefined. I guess this has something to do with that zod and translations aren't available yet.

Thanks for your thoughts, cheers.

P.s. here are some snippets to get an idea of what I have now:

// /src/routes/+layout.svelte
<script lang="ts">
	import { ParaglideJS } from '@inlang/paraglide-sveltekit';
	import { i18n } from '$lib/i18n';
	import * as m from '$lib/paraglide/messages.js';
	import errorMap from '$lib/i18n/zod/errorMap';
	import { setErrorMap } from 'zod';
	import { onMount } from 'svelte';

        onMount(() => {
            setErrorMap(errorMap);
        });
</script>

<ParaglideJS {i18n}>
...
</ParaglideJS>

// /src/lib/i18n/zod/errorMap.ts
import { type ErrorMapCtx, type ZodErrorMap, ZodIssueCode, type ZodIssueOptionalMessage } from 'zod';
import invalidType from '$lib/i18n/zod/errorTypes/invalidType';

const errorMap: ZodErrorMap = (error: ZodIssueOptionalMessage, _ctx: ErrorMapCtx): { message: string } => {
	switch (error.code) {
		case ZodIssueCode.invalid_type:
			return invalidType(error);
		...
		default:
			return { message: _ctx.defaultError };
	}
};

export default errorMap;

// /src/lib/i18n/zod/invalidType.ts
import { type ZodInvalidTypeIssue } from 'zod';
import * as m from '$lib/paraglide/messages';

const invalidTypeErrorMap = (issue: ZodInvalidTypeIssue) => {
	if (issue.expected === "string") {
		return { message: m.validation_invalid_string() };
	}
	return { message: m.validation_fallback_message() };
}

export default invalidTypeErrorMap;

[samuelstroschein]

Although not ideal, it works. Do you, from your experience, see any concerns doing it in this way?

It it works, it works! :D

As long as you avoid breaking tree-shaking by dynamically referencing a message like m[errorType] it should be fine.