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:

<script lang="ts"> import { superForm } from 'sveltekit-superforms/client'; let { data } = $props(); const { form, errors, enhance, message } = superForm(data.loginForm, { resetForm: true }); const { form: registerForm, errors: registerErrors, enhance: registerEnhance, message: registerMessage } = superForm(data.registerForm, { resetForm: true }); </script>

{#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:

<script lang="ts"> import { superForm } from 'sveltekit-superforms/client'; let { data } = $props(); const { form, errors, enhance, message, formId } = superForm(data.loginForm, { resetForm: true }); const { form: registerForm, errors: registerErrors, enhance: registerEnhance, message: registerMessage, formId: registerFormId } = superForm(data.registerForm, { resetForm: true }); </script>

{#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.