{"record":{"id":"befb797b9776e607","repo":"sveltejs/kit","slug":"use-enhance-can-only-be-used-on-form-fields-with","errorCode":null,"errorMessage":"use:enhance can only be used on <form> fields with method=\"POST\"","messagePattern":"use:enhance can only be used on <form> fields with method=\"POST\"","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/kit/src/runtime/app/forms/client.js","lineNumber":56,"sourceCode":" * - resets the `<form>` element and refreshes all data in case of a successful submission with no redirect response\n * - updates the `form` prop, `page.form` and `page.status` if the action is on the same page as the form\n * - 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\n * - redirects in case of a redirect response\n * - 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\n *\n * If you provide a custom function with a callback and want to use the default behavior, invoke `update` in your callback.\n * It accepts an options object\n * - `reset: false` if you don't want the `<form>` values to be reset after a successful submission\n * - `refreshAll` to control whether all data is refreshed after submission; it defaults to `true` for successes and `false` for failures\n * - `navigate: false` to apply non-redirect results to the current page rather than navigating to `result.location`; redirects are always followed\n * @template {Record<string, unknown> | undefined} Success\n * @template {Record<string, unknown> | undefined} Failure\n * @param {HTMLFormElement} form_element The form element\n * @param {SubmitFunction<Success, Failure>} submit Submit callback\n */\nexport function enhance(form_element, submit = noop) {\n\tif (DEV && clone(form_element).method !== 'post') {\n\t\tthrow new Error('use:enhance can only be used on <form> fields with method=\"POST\"');\n\t}\n\n\t/**\n\t * @param {{\n\t *   result: ActionResult;\n\t *   reset?: boolean;\n\t *   refreshAll?: boolean;\n\t *   invalidateAll?: boolean;\n\t *   navigate?: boolean;\n\t * }} opts\n\t */\n\tconst fallback_callback = async ({\n\t\tresult,\n\t\treset = true,\n\t\trefreshAll: should_refresh_all,\n\t\tinvalidateAll: deprecated_invalidate_all,\n\t\tnavigate = true\n\t}) => {","sourceCodeStart":38,"sourceCodeEnd":74,"githubUrl":"https://github.com/sveltejs/kit/blob/03f1687fe612ce3d2d9131139b5b188d9cf90c64/packages/kit/src/runtime/app/forms/client.js#L38-L74","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Add method=\"POST\" to the form element that uses use:enhance","If the form should be a GET (e.g. search), remove use:enhance and let the browser submit natively (or handle it manually)","If you must enhance a GET form, write your own submit handler instead of the built-in enhance"],"exampleFix":"// before\n<form use:enhance>\n// after\n<form method=\"POST\" use:enhance>","handlingStrategy":"validation","validationCode":"// before attaching enhance\nif (form.method.toLowerCase() !== 'post') {\n  throw new Error('use:enhance requires method=\"POST\"');\n}","typeGuard":"const canEnhance = (form) => form instanceof HTMLFormElement && form.method.toLowerCase() === 'post';","tryCatchPattern":"try {\n  enhance(form, submitFn);\n} catch (e) {\n  if (e.message.includes('method=\"POST\"')) {\n    console.error('Add method=\"POST\" to the form or drop use:enhance');\n  } else throw e;\n}","preventionTips":["Always pair use:enhance with method=\"POST\" on the form","For GET-style forms (search), do not use enhance","Run the dev server during development to catch this early","Enable TypeScript checking for Svelte action usage"],"tags":["sveltekit","forms","dev-only","validation"],"backgroundTag":"enhance-requires-post-form","analyzedSha":"03f1687fe612ce3d2d9131139b5b188d9cf90c64","analyzedAt":"2026-09-02T02:01:50.504Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T06:17:21.866Z"}