breaking: remove submitter option from experimental form validate(…) method, always provide default submitter (#14762)

* breaking: remove `submitter` option from experimental form `validate()` method, always provide default submitter

* fix

* remove log

---------

Co-authored-by: Tee Ming <[email protected]>

Author: Rich-Harris

.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

packages/kit/src/exports/public.d.ts

@@ -2067,8 +2067,6 @@ export type RemoteForm<Input extends RemoteFormInput | void, Output> = {
 		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<void>;
 	/** The result of the form submission */
 	get result(): Output | undefined;

packages/kit/src/runtime/client/remote-functions/form.svelte.js

@@ -522,15 +522,19 @@ export function form(id) {
 			},
 			validate: {
 				/** @type {RemoteForm<any, any>['validate']} */
-				value: async ({ includeUntouched = false, preflightOnly = false, submitter } = {}) => {
+				value: async ({ includeUntouched = false, preflightOnly = false } = {}) => {
 					if (!element) return;
 
 					const id = ++validate_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 = [];

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);
 </script>
 
@@ -24,20 +24,17 @@
 
 	<input {...my_form.fields.bar.as('text')} />
 
-	<button>submit (imperative validation)</button>
+	<button {...my_form.fields.button.as('submit', 'incorrect_value')}> submit </button>
 
-	<button bind:this={submitter} {...my_form.fields.button.as('submit', 'incorrect_value')}>
-		submit
-	</button>
 	{#each my_form.fields.button.issues() as issue}
 		<p>{issue.message}</p>
 	{/each}
-</form>
 
-<button
-	id="trigger-validate"
-	onclick={() => my_form.validate({ includeUntouched: true, submitter })}
->
+	<button {...my_form.fields.button.as('submit', 'submitter')}>
+		submit (imperative validation)
+	</button>
+</form>
+<button id="trigger-validate" onclick={() => my_form.validate({ includeUntouched: true })}>
 	trigger validation
 </button>
 

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, issue) => {
 		// Test imperative validation

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<void>;
 		/** The result of the form submission */
 		get result(): Output | undefined;