id option for superForm wasn't used in multiple form scenarios.

Author: ciscoheat

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - `submit` method now falls back to submit, if no support for requestSubmit in browser.
 - `isTainted` now handles the type of `$tainted` in generic components.
+- `id` option for superForm wasn't used in multiple form scenarios.
 
 ## [2.12.2] - 2024-03-29
 

src/lib/client/superForm.ts

@@ -464,10 +464,11 @@ export function superForm<
 
 		form = form as SuperValidated<T, M, In>;
 
-		// Check multiple id's
-		const _initialFormId = options.id ?? form.id;
+		// Assign options.id to form, if it exists
+		const _initialFormId = (form.id = options.id ?? form.id);
 		const _currentPage = get(page) ?? (STORYBOOK_MODE ? {} : undefined);
 
+		// Check multiple id's
 		if (browser && options.warnings?.duplicateId !== false) {
 			if (!formIds.has(_currentPage)) {
 				formIds.set(_currentPage, new Set([_initialFormId]));

src/routes/(v2)/v2/id-incorrect/+page.server.ts

@@ -0,0 +1,21 @@
+import type { Actions, PageServerLoad } from './$types.js';
+
+import { superValidate, message } from '$lib/index.js';
+import { zod } from '$lib/adapters/zod.js';
+import { fail } from '@sveltejs/kit';
+import { schema } from './schema.js';
+
+export const load: PageServerLoad = async () => {
+	return { form: await superValidate(zod(schema)) };
+};
+
+export const actions: Actions = {
+	default: async ({ request }) => {
+		const form = await superValidate(request, zod(schema));
+		console.log(form);
+
+		if (!form.valid) return fail(400, { form });
+
+		return message(form, 'Form posted successfully!');
+	}
+};

src/routes/(v2)/v2/id-incorrect/+page.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { zod, zodClient } from '$lib/adapters/zod.js';
+	import { defaults, superForm } from '$lib/client/index.js';
+	import SuperDebug from '$lib/client/SuperDebug.svelte';
+	import { schema } from './schema.js';
+	import { page } from '$app/stores';
+	//import { zod } from '$lib/adapters/zod.js'
+	//import { schema } from './schema.js';
+
+	export let data;
+
+	const { form, errors, tainted, message, enhance, formId } = superForm(data.form, {
+		validators: zodClient(schema),
+		taintedMessage: false,
+		resetForm: true
+	});
+
+	const {
+		form: formData,
+		errors: errors2,
+		formId: formId2,
+		enhance: enhance2,
+		posted
+	} = superForm(defaults(zod(schema)), {
+		id: 'abc',
+		taintedMessage: false,
+		invalidateAll: false,
+		resetForm: true,
+		validators: zodClient(schema)
+	});
+
+	// eslint-disable-next-line svelte/valid-compile
+	$page;
+</script>
+
+<SuperDebug data={{ $form, $errors, $tainted }} />
+
+{JSON.stringify($page.form)}
+
+{#if $message}<h4>{$message}</h4>{/if}
+
+<form method="POST" use:enhance>
+	<div>FORMID:{$formId}:</div>
+	<div>POSTED:{$posted}:</div>
+	<label>
+		Name: <input
+			name="name"
+			bind:value={$form.name}
+			aria-invalid={$errors.name ? 'true' : undefined}
+		/>
+		{#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
+	</label>
+	<label>
+		Email: <input
+			name="email"
+			bind:value={$form.email}
+			aria-invalid={$errors.email ? 'true' : undefined}
+		/>
+		{#if $errors.email}<span class="invalid">{$errors.email}</span>{/if}
+	</label>
+	<div>
+		<button>Submit</button>
+	</div>
+</form>
+
+<form method="POST" use:enhance2>
+	<div>FORMID:{$formId2}:</div>
+	<div>POSTED:{$posted}:</div>
+	<label>
+		Name2: <input name="name" bind:value={$formData.name} />
+		{#if $errors2.name}<span class="invalid">{$errors2.name}</span>{/if}
+	</label>
+	<label>
+		Email: <input
+			name="email"
+			bind:value={$formData.email}
+			aria-invalid={$errors2.email ? 'true' : undefined}
+		/>
+		{#if $errors2.email}<span class="invalid">{$errors2.email}</span>{/if}
+	</label>
+	<div>
+		<button>Submit</button>
+	</div>
+</form>
+
+<style lang="scss">
+	form {
+		margin: 2rem 0;
+
+		input {
+			background-color: #dedede;
+		}
+
+		.invalid {
+			color: crimson;
+		}
+	}
+</style>

src/routes/(v2)/v2/id-incorrect/schema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+	name: z.string().min(2),
+	email: z.string()
+});