fix submitters on remote forms

Author: ottomated

.changeset/nine-months-start.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: include `<button name="foo" value="bar">` values on submitted remote forms

documentation/docs/20-core-concepts/60-remote-functions.md

@@ -427,7 +427,7 @@ For client-side validation, you can specify a _preflight_ schema which will popu
 
 	const schema = v.object({
 		title: v.pipe(v.string(), v.nonEmpty()),
-		content:v.pipe(v.string(), v.nonEmpty())
+		content: v.pipe(v.string(), v.nonEmpty())
 	});
 </script>
 

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

@@ -1937,7 +1937,11 @@ export type RemoteForm<Input extends RemoteFormInput | void, Output> = {
 	/** Preflight checks */
 	preflight(schema: StandardSchemaV1<Input, any>): RemoteForm<Input, Output>;
 	/** Validate the form contents programmatically */
-	validate(options?: { includeUntouched?: boolean }): Promise<void>;
+	validate(options?: {
+		includeUntouched?: 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;
 	/** The number of pending submissions */

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

@@ -239,6 +239,11 @@ export function form(id) {
 
 				const form_data = new FormData(form);
 
+				const submitter_name = event.submitter?.getAttribute('name');
+				if (submitter_name) {
+					form_data.append(submitter_name, event.submitter?.getAttribute('value') ?? '');
+				}
+
 				if (DEV) {
 					validate_form_data(form_data, clone(form).enctype);
 				}
@@ -429,13 +434,18 @@ export function form(id) {
 			},
 			validate: {
 				/** @type {RemoteForm<any, any>['validate']} */
-				value: async ({ includeUntouched = false } = {}) => {
+				value: async ({ includeUntouched = false, submitter } = {}) => {
 					if (!element) return;
 
 					const id = ++validate_id;
 
 					const form_data = new FormData(element);
 
+					const submitter_name = submitter?.getAttribute('name');
+					if (submitter_name) {
+						form_data.append(submitter_name, submitter?.getAttribute('value') ?? '');
+					}
+
 					/** @type {readonly StandardSchemaV1.Issue[]} */
 					let array = [];
 

packages/kit/types/index.d.ts

@@ -1913,7 +1913,11 @@ declare module '@sveltejs/kit' {
 		/** Preflight checks */
 		preflight(schema: StandardSchemaV1<Input, any>): RemoteForm<Input, Output>;
 		/** Validate the form contents programmatically */
-		validate(options?: { includeUntouched?: boolean }): Promise<void>;
+		validate(options?: {
+			includeUntouched?: 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;
 		/** The number of pending submissions */