fix: clear issues upon passing validation (#14683)

Fixes #14646

Author: dummdidumm

.changeset/busy-planes-cover.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: clear issues upon passing validation

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

@@ -203,6 +203,9 @@ export function form(id) {
 
 					const form_result = /** @type { RemoteFunctionResponse} */ (await response.json());
 
+					// reset issues in case it's a redirect or error (but issues passed in that case)
+					raw_issues = [];
+
 					if (form_result.type === 'result') {
 						({ issues: raw_issues = [], result } = devalue.parse(form_result.result, app.decoders));
 

packages/kit/test/apps/basics/src/routes/remote/form/validate/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { issue_path_form, my_form } from './form.remote.js';
+	import { issue_path_form, my_form, my_form_2 } from './form.remote.js';
 	import * as v from 'valibot';
 
 	const schema = v.object({
@@ -8,7 +8,7 @@
 		button: v.optional(v.literal('submitter'))
 	});
 	let submitter;
-	$inspect(my_form.fields.allIssues());
+	let error = $state(false);
 </script>
 
 <form id="my-form" {...my_form.preflight(schema)} oninput={() => my_form.validate()}>
@@ -33,6 +33,7 @@
 		<p>{issue.message}</p>
 	{/each}
 </form>
+
 <button
 	id="trigger-validate"
 	onclick={() => my_form.validate({ includeUntouched: true, submitter })}
@@ -51,3 +52,25 @@
 	</button>
 	<pre id="allIssues">{JSON.stringify(issue_path_form.fields.allIssues())}</pre>
 </form>
+
+<form
+	id="my-form-2"
+	{...my_form_2.enhance(async ({ submit }) => {
+		error = false;
+		try {
+			await submit();
+		} catch {
+			error = true;
+		}
+	})}
+>
+	{#each my_form_2.fields.baz.issues() as issue}
+		<p>{issue.message}</p>
+	{/each}
+
+	<input {...my_form_2.fields.baz.as('text')} />
+
+	<p data-error>{error ? 'An error occurred' : 'No error'}</p>
+
+	<button>submit</button>
+</form>

packages/kit/test/apps/basics/src/routes/remote/form/validate/form.remote.ts

@@ -1,4 +1,5 @@
 import { form } from '$app/server';
+import { error } from '@sveltejs/kit';
 import * as v from 'valibot';
 
 export const my_form = form(
@@ -17,6 +18,15 @@ export const my_form = form(
 	}
 );
 
+export const my_form_2 = form(
+	v.object({
+		baz: v.picklist(['a', 'b'])
+	}),
+	async ({ baz }) => {
+		if (baz === 'a') error(400, 'Nope');
+	}
+);
+
 export const issue_path_form = form(
 	v.object({
 		nested: v.object({

packages/kit/test/apps/basics/test/test.js

@@ -1905,6 +1905,33 @@ test.describe('remote functions', () => {
 		await expect(allIssues).toContainText('"path":["nested","value"]');
 	});
 
+	test('form validation issues cleared', async ({ page, javaScriptEnabled }) => {
+		if (!javaScriptEnabled) return;
+
+		await page.goto('/remote/form/validate');
+
+		const baz = page.locator('input[name="baz"]');
+		const submit = page.locator('#my-form-2 button');
+
+		await baz.fill('c');
+		await submit.click();
+		await expect(page.locator('#my-form-2')).toContainText('Invalid type: Expected');
+
+		await baz.fill('a');
+		await submit.click();
+		await expect(page.locator('#my-form-2')).not.toContainText('Invalid type: Expected');
+		await expect(page.locator('[data-error]')).toHaveText('An error occurred');
+
+		await baz.fill('c');
+		await submit.click();
+		await expect(page.locator('#my-form-2')).toContainText('Invalid type: Expected');
+
+		await baz.fill('b');
+		await submit.click();
+		await expect(page.locator('#my-form-2')).not.toContainText('Invalid type: Expected');
+		await expect(page.locator('[data-error]')).toHaveText('No error');
+	});
+
 	test('form inputs excludes underscore-prefixed fields', async ({ page, javaScriptEnabled }) => {
 		if (javaScriptEnabled) return;