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 1ef333310326..cda0790e5873 100644 --- a/packages/kit/src/exports/public.d.ts +++ b/packages/kit/src/exports/public.d.ts @@ -2053,8 +2053,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 02bbf9239720..38e5c3cd1790 100644 --- a/packages/kit/src/runtime/client/remote-functions/form.svelte.js +++ b/packages/kit/src/runtime/client/remote-functions/form.svelte.js @@ -519,7 +519,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; @@ -527,7 +527,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, [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 6d53630be4ac..b216d778df52 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; + $inspect(my_form.fields.allIssues()); @@ -24,19 +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 c3ae78ab9854..6c2db149cb7f 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 @@ -5,7 +5,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 9705e4a0b9bd..cb007c9b4ee3 100644 --- a/packages/kit/types/index.d.ts +++ b/packages/kit/types/index.d.ts @@ -2029,8 +2029,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;