Multiple forms on the same page
Since there is only one $page
store per route, multiple forms on the same page, like a register and login form, can cause problems since both form actions will update $page.form
, possibly affecting the other form.
With Superforms, multiple forms on the same page are handled automatically if you are using use:enhance
, and the forms have different schema types. When using the same schema for multiple forms, you need to set the id
option:
const form = await superValidate(zod(schema), {
id: string | undefined
});
By setting an id on the server, you’ll ensure that only forms with the matching id on the client will react to the updates.
Here’s an example of how to handle a login and registration form on the same page:
+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;
The code above uses named form actions to determine which form was posted. On the client, you’ll post to these different form actions for the respective form:
+page.svelte
<script lang="ts">
import { superForm } from 'sveltekit-superforms/client';
import type { PageData } from './$types.js';
export let data: PageData;
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}<h3>{$message}</h3>{/if}
<form method="POST" action="?/login" use:enhance>
E-mail: <input name="email" type="email" bind:value={$form.email} />
Password:
<input name="password" type="password" bind:value={$form.password} />
<button>Submit</button>
</form>
<hr />
{#if $registerMessage}<h3>{$registerMessage}</h3>{/if}
<form method="POST" action="?/register" use:registerEnhance>
E-mail: <input name="email" type="email" bind:value={$registerForm.email} />
Password:
<input name="password" type="password" bind:value={$registerForm.password} />
Confirm password:
<input
name="confirmPassword"
type="password"
bind:value={$registerForm.confirmPassword} />
<button>Submit</button>
</form>
The above works well with forms that posts to a dedicated form action. But for more dynamic scenarios, let’s say a database table where rows can be edited, the form id should correspond to the row id, and you’d want to communicate to the server which id was sent. This can be done by modifying the $formId
store, to let the server know what id
was posted, and what it should respond with.
Setting id on the client
On the client, the id is picked up automatically when you pass data.form
to superForm
, so in general, you don’t have to add it on the client.
// Default behavior: The id is sent along with the form data
// sent from the load function.
const { form, enhance, formId } = superForm(data.loginForm);
// In advanced cases, you can set the id as an option
// and it will take precedence.
const { form, enhance, formId } = superForm(data.form, {
id: 'custom-id'
});
You can also change the id dynamically with the $formId
store, or set it directly in the form with the following method:
Without use:enhance
Multiple forms also work without use:enhance
, though in this case you must add a hidden form field called __superform_id
with the $formId
value:
<script lang="ts">
import { superForm } from 'sveltekit-superforms/client';
import type { PageData } from './$types.js';
export let data: PageData;
const { form, errors, formId } = superForm(data.form);
</script>
<form method="POST" action="?/login">
<input type="hidden" name="__superform_id" bind:value={$formId} />
</form>
This is also required if you’re changing schemas in a form action, as can happen in multi-step forms.
Returning multiple forms
If you have a use case where the data in one form should update another, you can return both forms in the form action: return { loginForm, registerForm }
, but be aware that you may need resetForm: false
on the second form, as it will reset and clear the updated changes, if it’s valid and a successful response is returned.
Hidden forms
Sometimes you want a fetch function for a form field or a list of items, for example checking if a username is valid while entering it, or deleting rows in a list of data. Instead of doing this manually with fetch, which cannot take advantage of Superforms’ loading timers, events and other functionality, you can create a hidden form that does most of the work, with the convenience you get from superForm
:
// First the visible form
const { form, errors, ... } = superForm(...);
// The the hidden form
const { submitting, submit } = superForm(
{ username: '' },
{
invalidateAll: false,
applyAction: false,
multipleSubmits: 'abort',
onSubmit({ cancel, formData }) {
// Using the visible form data
if (!$form.username) cancel();
formData.set('username', $form.username);
},
onUpdated({ form }) {
// Update the other form to show the error message
$errors.username = form.errors.username;
}
}
);
const checkUsername = debounce(300, submit);
Create a form action for it:
const usernameSchema = fullSchema.pick({ username: true });
export const actions: Actions = {
check: async ({ request }) => {
const form = await superValidate(request, zod(usernameSchema));
if (!form.valid) return fail(400, { form });
if(!checkUsername(form.data.username)) {
setError(form, 'username', 'Username is already taken.');
}
return { form };
}
};
And finally, an on:input
event on the input field:
<input
name="username"
aria-invalid={$errors.username ? 'true' : undefined}
bind:value={$form.username}
on:input={checkUsername}
/>
{#if $submitting}<img src={spinner} alt="Checking availability" />
{:else if $errors.username}<div class="invalid">{$errors.username}</div>{/if}
A full example of a username check is available on SvelteLab.
Configuration and troubleshooting
Due to the many different use cases, it’s hard to set sensible default options for multiple forms. A common issue is that when one form is submitted, the other forms’ data are lost. This is due to the page being invalidated by default on a successful response.
If you want to preserve their data, you’d almost certainly want to set invalidateAll: false
or applyAction: false
on them, as in the example above. The use:enhance option explains the differences between them.
Also check out the componentization page for ideas on how to place the forms into separate components, to make +page.svelte
less cluttered.
Test it out
Here we have two forms, with separate id’s and their invalidateAll
option set to false
, to prevent page invalidation, which would otherwise clear the other form when the load function executes again.