{"record":{"id":"29af375331494928","repo":"sveltejs/kit","slug":"cannot-call-submit-before-the-form-is-attached","errorCode":null,"errorMessage":"Cannot call submit() before the form is attached","messagePattern":"Cannot call submit\\(\\) before the form is attached","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/kit/src/runtime/client/remote-functions/form.svelte.js","lineNumber":619,"sourceCode":"\t\t\treturn () => {\n\t\t\t\tform.removeEventListener('submit', handle_submit);\n\t\t\t\tform.removeEventListener('input', handle_input);\n\t\t\t\tform.removeEventListener('focusout', handle_focusout);\n\t\t\t\tform.removeEventListener('reset', handle_reset);\n\t\t\t\telement = null;\n\t\t\t};\n\t\t};\n\n\t\tlet validate_id = 0;\n\n\t\tObject.defineProperties(instance, {\n\t\t\telement: {\n\t\t\t\tget: () => element\n\t\t\t},\n\t\t\tsubmit: {\n\t\t\t\tvalue: () => {\n\t\t\t\t\tif (!element) {\n\t\t\t\t\t\tthrow new Error('Cannot call submit() before the form is attached');\n\t\t\t\t\t}\n\n\t\t\t\t\tconst default_submitter = /** @type {HTMLElement | undefined} */ (\n\t\t\t\t\t\telement.querySelector('button:not([type]), [type=\"submit\"], [type=\"image\"]')\n\t\t\t\t\t);\n\n\t\t\t\t\tconst form_data = new FormData(element, default_submitter);\n\n\t\t\t\t\tif (DEV) {\n\t\t\t\t\t\tvalidate_form_data(form_data, clone(element).enctype);\n\t\t\t\t\t}\n\n\t\t\t\t\tsubmitted = true;\n\t\t\t\t\tpending_count++;\n\n\t\t\t\t\tconst submission = submit(form_data, true);\n\n\t\t\t\t\tconst decrement = () => {","sourceCodeStart":601,"sourceCodeEnd":637,"githubUrl":"https://github.com/sveltejs/kit/blob/03f1687fe612ce3d2d9131139b5b188d9cf90c64/packages/kit/src/runtime/client/remote-functions/form.svelte.js#L601-L637","documentation":"A remote form instance's submit() can only run once the form instance has been attached to an actual <form> element. If submit() is invoked while the internal element reference is still undefined, SvelteKit throws. The attachment normally happens when the form action binding mounts.","triggerScenarios":"Calling form.submit() (or via entry/instance) before the component containing the <form use:...> has mounted, e.g. in onMount before binding, in an effect running too early, or when the form element is conditionally not rendered.","commonSituations":"Auto-submitting a form on page load; calling submit() from a parent before the child form renders; wrapping submit() in a script that runs at module init.","solutions":["Call submit() only after the form is mounted, e.g. inside onMount after the action binding has run, or from a user event handler","Guard the call: only invoke submit() when the form element exists","If auto-submitting, await a tick/afterUpdate or attach via an action callback before submitting"],"exampleFix":"// before\nconst instance = myForm.create();\ninstance.submit(); // throws — form not attached yet\n// after\nonMount(() => {\n  if (instance.element) instance.submit();\n});","handlingStrategy":"try-catch","validationCode":"if (instance.element) instance.submit();","typeGuard":"const canSubmit = (inst) => typeof inst.element !== 'undefined' && inst.element !== null;","tryCatchPattern":"try {\n  instance.submit();\n} catch (e) {\n  if (e.message.includes('before the form is attached')) {\n    // defer until mounted / user interaction\n  } else throw e;\n}","preventionTips":["Only call submit() from user event handlers or after mount","Never auto-submit during component initialization","Verify the form element is rendered (not behind a false condition)"],"tags":["remote-forms","lifecycle","client"],"backgroundTag":"form-submit-before-attached","analyzedSha":"03f1687fe612ce3d2d9131139b5b188d9cf90c64","analyzedAt":"2026-09-02T02:01:50.504Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T06:17:21.866Z"}