Skip to content
Andreas Söderlund edited this page Feb 26, 2023 · 27 revisions

Are multiple forms on the same page supported?

There is only one Page and ActionData on a page, so multiple forms on the same page can cause trouble since it's hard to know which form updated page. An example is if you have a login form in the navigation that will be present on every page. Fortunately sveltekit-superforms has a simple solution for this, by setting options.applyAction to false, which will prevent it from updating Page and ActionData. If you want to make it completely self-contained, set options.invalidateAll to false as well.

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.

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';

export function yourSuperForm(
  ...params: Parameters<typeof superForm>
): ReturnType<typeof superForm> {
  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;
Clone this wiki locally