diff --git a/.changeset/fast-rooms-move.md b/.changeset/fast-rooms-move.md new file mode 100644 index 000000000000..a3fa627e91f1 --- /dev/null +++ b/.changeset/fast-rooms-move.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/kit': patch +--- + +fix: clear issues and touched states on form reset 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 c3f61ac04da3..d1144e22344f 100644 --- a/packages/kit/src/runtime/client/remote-functions/form.svelte.js +++ b/packages/kit/src/runtime/client/remote-functions/form.svelte.js @@ -541,6 +541,8 @@ export function form(id) { await tick(); input = convert_formdata(new FormData(form)); + raw_issues = []; + touched = {}; }; form.addEventListener('submit', handle_submit); diff --git a/packages/kit/test/apps/async/src/routes/remote/form/reset-id/+page.svelte b/packages/kit/test/apps/async/src/routes/remote/form/reset-id/+page.svelte index 680232d63e77..9c77eaeb2a8a 100644 --- a/packages/kit/test/apps/async/src/routes/remote/form/reset-id/+page.svelte +++ b/packages/kit/test/apps/async/src/routes/remote/form/reset-id/+page.svelte @@ -5,8 +5,13 @@
+
+{#each reset_id.fields.message.issues() as issue (issue)} +

{issue.message}

+{/each} + {#if reset_id.result?.message}
{reset_id.result.message}
{/if} diff --git a/packages/kit/test/apps/async/src/routes/remote/form/reset-id/form.remote.ts b/packages/kit/test/apps/async/src/routes/remote/form/reset-id/form.remote.ts index f15b32efba81..e24ad78d2ed8 100644 --- a/packages/kit/test/apps/async/src/routes/remote/form/reset-id/form.remote.ts +++ b/packages/kit/test/apps/async/src/routes/remote/form/reset-id/form.remote.ts @@ -3,7 +3,7 @@ import * as v from 'valibot'; export const reset_id = form( v.object({ - message: v.string() + message: v.pipe(v.string(), v.minLength(10, 'too short')) }), ({ message }) => { return { success: true, message }; diff --git a/packages/kit/test/apps/async/test/client.test.js b/packages/kit/test/apps/async/test/client.test.js index abbc87ba82c4..fa1e36a3c0c2 100644 --- a/packages/kit/test/apps/async/test/client.test.js +++ b/packages/kit/test/apps/async/test/client.test.js @@ -1107,9 +1107,18 @@ test.describe('remote function mutations', () => { test('form submission with element id `reset` resets the form', async ({ page }) => { await page.goto('/remote/form/reset-id'); - await page.locator('[name="message"]').fill('test'); + await page.locator('[name="message"]').fill('short'); await page.click('button'); - await expect(page.locator('#result')).toHaveText('test'); + + await expect(page.locator('.error')).toHaveText('too short'); + + await page.click('[type="reset"]'); + await expect(page.locator('.error')).toHaveCount(0); + + await page.locator('[name="message"]').fill('long enough'); + await page.click('button'); + + await expect(page.locator('#result')).toHaveText('long enough'); await expect(page.locator('[name="message"]')).toBeEmpty(); }); });