sveltejs/kit · error · Error

use:enhance can only be used on <form> fields with method="P

Error message

use:enhance can only be used on <form> fields with method="POST"

What it means

use:enhance progressively enhances form submissions by intercepting the submit event and issuing a POST fetch. It only works for forms whose method is POST; in dev, SvelteKit validates the DOM form's method attribute and throws otherwise, because enhanced GET forms would behave differently from native submission.

Source

Thrown at packages/kit/src/runtime/app/forms/client.js:56

 * - resets the `<form>` element and refreshes all data in case of a successful submission with no redirect response
 * - updates the `form` prop, `page.form` and `page.status` if the action is on the same page as the form
 * - navigates to the page the submission lands on — populating that page's `form` prop and `page.status` — on success and failure if that isn't the current page, just as a native form submission would, but with the `?/actionName` param stripped from the destination URL
 * - redirects in case of a redirect response
 * - renders the nearest error page in case of an unexpected error — the one nearest the action's route, if the action is on a different page
 *
 * If you provide a custom function with a callback and want to use the default behavior, invoke `update` in your callback.
 * It accepts an options object
 * - `reset: false` if you don't want the `<form>` values to be reset after a successful submission
 * - `refreshAll` to control whether all data is refreshed after submission; it defaults to `true` for successes and `false` for failures
 * - `navigate: false` to apply non-redirect results to the current page rather than navigating to `result.location`; redirects are always followed
 * @template {Record<string, unknown> | undefined} Success
 * @template {Record<string, unknown> | undefined} Failure
 * @param {HTMLFormElement} form_element The form element
 * @param {SubmitFunction<Success, Failure>} submit Submit callback
 */
export function enhance(form_element, submit = noop) {
	if (DEV && clone(form_element).method !== 'post') {
		throw new Error('use:enhance can only be used on <form> fields with method="POST"');
	}

	/**
	 * @param {{
	 *   result: ActionResult;
	 *   reset?: boolean;
	 *   refreshAll?: boolean;
	 *   invalidateAll?: boolean;
	 *   navigate?: boolean;
	 * }} opts
	 */
	const fallback_callback = async ({
		result,
		reset = true,
		refreshAll: should_refresh_all,
		invalidateAll: deprecated_invalidate_all,
		navigate = true
	}) => {

View on GitHub (pinned to 03f1687fe6)

Solutions

1. Add method="POST" to the form element that uses use:enhance
2. If the form should be a GET (e.g. search), remove use:enhance and let the browser submit natively (or handle it manually)
3. If you must enhance a GET form, write your own submit handler instead of the built-in enhance

Example fix

// before
<form use:enhance>
// after
<form method="POST" use:enhance>

// before attaching enhance
if (form.method.toLowerCase() !== 'post') {
  throw new Error('use:enhance requires method="POST"');
}

const canEnhance = (form) => form instanceof HTMLFormElement && form.method.toLowerCase() === 'post';

try {
  enhance(form, submitFn);
} catch (e) {
  if (e.message.includes('method="POST"')) {
    console.error('Add method="POST" to the form or drop use:enhance');
  } else throw e;
}

When it happens

Trigger: Applying use:enhance={...} to a <form> whose method attribute is missing or set to something other than "post" (method defaults to GET). Only checked when DEV is true.

Common situations: Adding the enhance action from $app/forms to a search/filter form without method="post", copying an example but dropping the method attribute, or setting method="get" for bookmarkable query forms.

Related errors

• Your form contains <input type="file"> fields, but is missin
• Could not deserialize binary form: invalid file offset table
• Could not deserialize binary form: invalid file metadata
• Could not deserialize binary form: duplicate file offset tab
• ${keypath} cannot be empty

AI-assisted analysis of sveltejs/kit@03f1687fe6 (2026-09-02). Data as JSON: /api/errors/befb797b9776e607. Report an issue: GitHub.