[Remote Function] form not clear validation error

[RoxDevvv]

Describe the bug

I have a dialog that destroys the form when it closes, but when I reopen it, the validation issues are still there. I expected something like createPost.fields.reset() to clear the issues.
How can I fully reset the validation state when reopening the dialog?

Reproduction

{#each createPost.fields.content.issues() as issue}
<p class="issue">{issue.message}</p>
{/each}

Logs

System Info

System:
    OS: Windows 11 10.0.26200
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 25.31 GB / 47.92 GB
  Binaries:
    Node: 24.11.1 - C:\Program Files\nodejs\node.EXE
    npm: 11.6.4 - C:\Users\GameDev\AppData\Roaming\npm\npm.CMD
  Browsers:
    Edge: Chromium (140.0.3485.54)
    Internet Explorer: 11.0.26100.7309
  npmPackages:
    @sveltejs/adapter-auto: ^7.0.0 => 7.0.0
    @sveltejs/adapter-node: ^5.4.0 => 5.4.0
    @sveltejs/kit: ^2.47.1 => 2.48.4
    @sveltejs/vite-plugin-svelte: ^6.2.1 => 6.2.1
    svelte: ^5.41.0 => 5.43.6
    vite: ^7.1.10 => 7.2.2

Severity

annoyance

Additional Information

No response

[squeezeboxhuf]

I have the same issue!

[sillvva]

Temporary solution is to add .for(id) to the form with a random id value. It makes a new instance of the form for each id.

https://svelte.dev/docs/kit/remote-functions#form-Multiple-instances-of-a-form

The long term solution I'm hoping for: #14815

[RoxDevvv]

Thank you it works , waiting for your solution to get merged

[squeezeboxhuf]

I have my form within a dialog overlay, and am setting the values of the input fields with an onclick function when selecting to "edit" one of the rows in my table, so I only have one form on the page, it's not within the each block - it gets destroyed and recreated each time the dialog closes and opens. I'm not sure I can use the .for(id) trick in this instance can I? 🤔. The issues resulting from my form submission remain visible even when I close the form dialog and reopen by selecting the edit button on another row. I'm not following how to use the .for(id) trick...

[sillvva]

So long as the id value you pass to .for(id) is unique each time the form loads, it will reset the internal state - values, issues, etc. Without .for(id), you're reusing a cached instance of the form each time.

[RoxDevvv]

@squeezeboxhuf yes am same page as you i have done it this way
am not sure if it best way but it work for me

<script lang="ts">
const form = YourRemoteFunction.for(Date.now().toString(36) + Math.random().toString(36).slice(2));
 
let enhanced = form.preflight(YourSchemaIncaseYouWantClientSideValidation).enhance(async ({ submit }) => {
	try {
		await submit();
	} catch (error) { }
});
</script>


<form yourStuff {...enhanced}>
	<input {...form.fields.data.type.as('text')}  />
	<input {...form.fields.order.as('number')} />
	.... and so on
</form>

[kevlarr]

@squeezeboxhuf yes am same page as you i have done it this way am not sure if it best way but it work for me

<script lang="ts">
const form = YourRemoteFunction.for(Date.now().toString(36) + Math.random().toString(36).slice(2));
 
let enhanced = form.preflight(YourSchemaIncaseYouWantClientSideValidation).enhance(async ({ submit }) => {
	try {
		await submit();
	} catch (error) { }
});
</script>


<form yourStuff {...enhanced}>
	<input {...form.fields.data.type.as('text')}  />
	<input {...form.fields.order.as('number')} />
	.... and so on
</form>

This definitely solved it for me, thanks @RoxDevvv. Should even be able to simplify it with $props.id, too:

...

const form = YourRemoteFunction.for($props.id());

...

[RoxDevvv]

$props.id() is awesome trick thank you for sharing it @kevlarr my code is much cleaner now