I am developing a form with Sveltekit, sveltekit-superforms, drizzle, zod schema to be able to perform server-side checks of the form, the problem subsists in the fact that after performing the checks, in trying to send messages back to the client it would appear that the value of message is always undefined, despite the fact that I am sending a message with parameters set, I can't figure out why it doesn't work. Here is the server-side code:
export const load = (async () => { return { formData: await superValidate(ZodSchema) };}) satisfies PageServerLoad;export const actions: Actions = { submitCheckout: async ({ request }) => { // Validate the form const formData = await superValidate<typeof ZodSchema, AlertMessageType>( request, ZodSchema ); // Check if form is valid if (formData.valid === false) { return message(formData, { alertType: 'error', alertText: INVALID_FORM_DATA_ERROR }); }... return message(formData, { alertType: 'success', alertText: SUCCESS_MESSAGE }); }};
while this is client-side:
const { enhance, form, errors, message } = superForm(data.props.formData, { resetForm: true, taintedMessage: null, validators: ZodSchema, onUpdate: () => { isProcessing = false; if (!$message) return; const { alertType, alertText } = $message; if (alertType === 'error') { toast.error(alertText); } if (alertType === 'success') { toast.success(alertText); } } });
This is the type of the AlertMessage:
export type AlertMessageType = { alertType: 'success' | 'error' | 'warning' | 'info'; alertText: string;};