diff --git a/.changeset/tangy-aliens-end.md b/.changeset/tangy-aliens-end.md new file mode 100644 index 000000000000..d2dc04d32866 --- /dev/null +++ b/.changeset/tangy-aliens-end.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/kit': patch +--- + +breaking: remove `submitter` option from experimental form `validate()` method, always provide default submitter diff --git a/packages/kit/src/exports/public.d.ts b/packages/kit/src/exports/public.d.ts index 5bc86276b4f5..623a4db81f92 100644 --- a/packages/kit/src/exports/public.d.ts +++ b/packages/kit/src/exports/public.d.ts @@ -2067,8 +2067,6 @@ export type RemoteForm = { includeUntouched?: boolean; /** Set this to `true` to only run the `preflight` validation. */ preflightOnly?: boolean; - /** Perform validation as if the form was submitted by the given button. */ - submitter?: HTMLButtonElement | HTMLInputElement; }): Promise; /** The result of the form submission */ get result(): Output | undefined; diff --git a/packages/kit/src/runtime/client/remote-functions/form.svelte.js b/packages/kit/src/runtime/client/remote-functions/form.svelte.js index c9696fa97f0d..d2951e6e0376 100644 --- a/packages/kit/src/runtime/client/remote-functions/form.svelte.js +++ b/packages/kit/src/runtime/client/remote-functions/form.svelte.js @@ -522,7 +522,7 @@ export function form(id) { }, validate: { /** @type {RemoteForm['validate']} */ - value: async ({ includeUntouched = false, preflightOnly = false, submitter } = {}) => { + value: async ({ includeUntouched = false, preflightOnly = false } = {}) => { if (!element) return; const id = ++validate_id; @@ -530,7 +530,11 @@ export function form(id) { // wait a tick in case the user is calling validate() right after set() which takes time to propagate await tick(); - const form_data = new FormData(element, submitter); + const default_submitter = /** @type {HTMLElement | undefined} */ ( + element.querySelector('button:not([type]), [type="submit"]') + ); + + const form_data = new FormData(element, default_submitter); /** @type {InternalRemoteFormIssue[]} */ let array = []; diff --git a/packages/kit/test/apps/basics/src/routes/remote/form/validate/+page.svelte b/packages/kit/test/apps/basics/src/routes/remote/form/validate/+page.svelte index 2ccb5e5ba745..eefd62be84dc 100644 --- a/packages/kit/test/apps/basics/src/routes/remote/form/validate/+page.svelte +++ b/packages/kit/test/apps/basics/src/routes/remote/form/validate/+page.svelte @@ -5,9 +5,9 @@ const schema = v.object({ foo: v.picklist(['a', 'b', 'c']), bar: v.picklist(['d', 'e']), - button: v.optional(v.literal('submitter')) + button: v.literal('submitter') }); - let submitter; + let error = $state(false); @@ -24,20 +24,17 @@ - + - {#each my_form.fields.button.issues() as issue}

{issue.message}

{/each} - - + + diff --git a/packages/kit/test/apps/basics/src/routes/remote/form/validate/form.remote.ts b/packages/kit/test/apps/basics/src/routes/remote/form/validate/form.remote.ts index 3e5b2826baa8..6320a8f709a7 100644 --- a/packages/kit/test/apps/basics/src/routes/remote/form/validate/form.remote.ts +++ b/packages/kit/test/apps/basics/src/routes/remote/form/validate/form.remote.ts @@ -6,7 +6,7 @@ export const my_form = form( v.object({ foo: v.picklist(['a', 'b', 'c']), bar: v.picklist(['d', 'e', 'f']), - button: v.optional(v.literal('submitter')) + button: v.literal('submitter') }), async (data, invalid) => { // Test imperative validation diff --git a/packages/kit/types/index.d.ts b/packages/kit/types/index.d.ts index cf87795ed247..e134ccb20c6e 100644 --- a/packages/kit/types/index.d.ts +++ b/packages/kit/types/index.d.ts @@ -2043,8 +2043,6 @@ declare module '@sveltejs/kit' { includeUntouched?: boolean; /** Set this to `true` to only run the `preflight` validation. */ preflightOnly?: boolean; - /** Perform validation as if the form was submitted by the given button. */ - submitter?: HTMLButtonElement | HTMLInputElement; }): Promise; /** The result of the form submission */ get result(): Output | undefined;