FAQ

Are multiple forms on the same page supported?

Multiple forms on the same page are possible by setting options.id for each form (or just one of them), preventing them from interfering with with each other, which can happen as they both both update the same $page.status and $page.form.

export const actions = {
  default: async (event) => {
    const loginForm = await superValidate(event, schema, { id: 'login-form' });
    return { loginForm }
  }
} satisfies Actions;

Please note that as default, this is a server-to-client communication, so posting to a form action or endpoint won't make the server automatically aware that a specific form was sent! In the example above, the update will be applied to login-form on the client, no matter who posted to it.

If you want to communicate back which form was sent, you need to do that outside superValidate. It could be as simple as different form actions, or in a more dynamic fashion, using a hidden form field or a GET variable, for example, to set the id when calling superValidate.

On the client, if you don't send any data to the form initially, you can set the id directly in the first argument to superForm:

const { form, errors } = superForm('login-form', schema);

// If data is used, the id is already sent.
const { form, errors } = superForm(data.loginForm, schema);

What are the default entity values?

See this wiki entry for a list of default values, used when data for a schema field is missing.

The default values aren't what I want, can I override them?

Yes, you can set a default schema value to anything you'd like it to be. For example with the classic "agree to terms" checkbox:

const schema = z.object({
  age: z.number().positive().default(NaN),
  agree: z.literal(true).default(false as true)
})

This looks strange, but will ensure that an age must be selected and the agree checkbox is unchecked as default, and will only accept true as a value. Just note that you will bypass the type system with this, so the default value will not correspond to the data type, but this will usually not be a problem since form.valid will be false if the default values are posted as-is, and that should be the main determinant whether the data is trustworthy.

I want to reuse common options, how to do that easily?

When you start to configure the library to suit your stack, it's recommended to create an object with default options that you will refer to instead:

import { superForm } from 'sveltekit-superforms/client';
import type { AnyZodObject } from 'zod';

export function yourSuperForm<T extends AnyZodObject>(
  ...params: Parameters<typeof superForm<T>>
) {
  return superForm(params[0], {
    // Your defaults here
    errorSelector: '.has-error',
    delayMs: 300,
    ...params[1]
  });
}

How to handle file uploads?

Currently, file uploads are not handled with sveltekit-superforms. The recommended way to do it is to grab the FormData and extract the files from there, after validation:

export const actions = {
  default: async ({ request }) => {
    const formData = await request.formData();
    const form = await superValidate(formData, schema);

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

    const file = formData.get('file');
    if (file instanceof File) {
      // Do something with the file.
    }

    return { form };
  }
} satisfies Actions;

The message string property is a bit limiting, can I use an object instead?

Making message a generic type will complicate the API and its types, and won't work with redirects anyway, so I have three suggestions if you need more than a string:

1. If you just want it to work with the message property, combine it with $page.status to determine whether there's an error or not.
2. Use sveltekit-flash-message for a complete solution that works with redirects. It can be directly integrated into superforms, documented here.
3. Add an optional message field to the schema, then set its value before returning from the form action.

What does options.applyAction do?

When applyAction is false, you need to handle page updates yourself for that form, as described in SvelteKit's use:enhance docs.

Note that options.invalidateAll is true as default, so if you want to make a form completely self-contained, neither touching $page nor running any load functions on success, set it to false as well.