Multiple forms on the same page

[OliverBurrell]

The example code on https://superforms.rocks/concepts/multiple-forms (with different form names) does not display messages anymore after Svelte 5 migration. I had a similar page working in Svelte 4.2.7, Sveltekit-Superforms 2.19.1.

Here is the +page.server.ts: import { z } from 'zod'; import { fail } from '@sveltejs/kit'; import { message, superValidate } from 'sveltekit-superforms'; import { zod } from 'sveltekit-superforms/adapters'; import type { Actions, PageServerLoad } from './$types';

const loginSchema = z.object({ email: z.string().email(), password: z.string().min(8) });

const registerSchema = z.object({ email: z.string().email(), password: z.string().min(8), confirmPassword: z.string().min(8) });

export const load: PageServerLoad = async () => { // Different schemas, no id required. const loginForm = await superValidate(zod(loginSchema)); const registerForm = await superValidate(zod(registerSchema));

// Return them both return { loginForm, registerForm }; };

export const actions = { login: async ({ request }) => { const loginForm = await superValidate(request, zod(loginSchema));

if (!loginForm.valid) return fail(400, { loginForm });

// TODO: Login user
return message(loginForm, 'Login form submitted');

},

register: async ({ request }) => { const registerForm = await superValidate(request, zod(registerSchema));

if (!registerForm.valid) return fail(400, { registerForm });

// TODO: Register user
return message(registerForm, 'Register form submitted');

} } satisfies Actions;

+page.svelte:

{#if $message}

{$message}

{/if}

E-mail: Password: Submit

---

{#if $registerMessage}

{$registerMessage}

{/if}

E-mail: Password: Confirm password: Submit

[OliverBurrell]

I just tried to create a sveltelab.dev example and noticed that the messages are displayed for a very short time. Maybe on my machine this is too fast to see? I'll check it tomorrow ... However, why are they displayed only for a short time?

[OliverBurrell]

I tested it on my machine isolated and it does not display the {$message} anymore. In the Superform Multiple Forms example https://superforms.rocks/concepts/multiple-forms it does not work if I only have different names for the forms and messages anymore but if I add the formID and the hidden inputs it works:

{#if $message}

{$message}

{/if}

<form method="POST" action="?/login" use:enhance>
	<input type="hidden" name="__superform_id" bind:value={$formId} />
	E-mail:
	<input
		name="email"
		type="email"
		bind:value={$form.email}
		class="mt-1 block w-50 rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
	/>
	Password:
	<input
		name="password"
		type="password"
		bind:value={$form.password}
		class="mt-1 block w-50 rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
	/>
	<button class="mt-3 rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
		>Submit</button
	>
</form>

---

{#if $registerMessage}

{$registerMessage}

{/if}

<form method="POST" action="?/register" use:registerEnhance>
	<input type="hidden" name="__superform_id" bind:value={$registerFormId} />
	E-mail:
	<input
		name="email"
		type="email"
		bind:value={$registerForm.email}
		class="mt-1 block w-50 rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
	/>
	Password:
	<input
		name="password"
		type="password"
		bind:value={$registerForm.password}
		class="mt-1 block w-50 rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
	/>
	Confirm password:
	<input
		name="confirmPassword"
		type="password"
		bind:value={$registerForm.confirmPassword}
		class="mt-1 block w-50 rounded-md border-transparent bg-gray-100 focus:border-gray-500 focus:bg-white focus:ring-0"
	/>
	<button class="mt-3 rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
		>Submit</button
	>
</form>

[ciscoheat]

Can you recreate this example on SvelteLab, with the Zod template: https://sveltelab.dev/github.com/ciscoheat/superforms-examples/tree/zod then I can take a closer look.