Experimental async changes remote form validation

[hyunbinseo]

Describe the bug

Enabling async: true breaks onchange validation.

I am using top-level fieldset and disabling it to block additional submission during submission.

• Document form().pending in the remote functions #14655

<script lang="ts">
  import { PublicSchema } from './form';
  import { submitEmail } from './form.remote';
</script>

<form
  {...submitEmail.preflight(PublicSchema)}
  onchange={() => submitEmail.validate({ preflightOnly: true })}
>
  <fieldset disabled={!!submitEmail.pending}>
    <label>
      <span>Email</span>
      <input {...submitEmail.fields.email.as('email')} />
    </label>
    <ul>
      {#each submitEmail.fields.email.issues() as issue}
        <li>{issue.message}</li>
      {/each}
    </ul>
    <button>Submit</button>
  </fieldset>
</form>

1. Enable experimental async
2. Enter email and press enter to submit
3. Form is successfully submitted to the server, but a validation error is shown:

# payload includes the email
/[[1,3],{"email":2},"hyunbinseo@example.com",{}]

Invalid key: Expected "email" but received undefined

4. Refresh the page
5. Enter email and click the submit button
6. No validation error is shown

2025-12-28.220454.mp4

Reproduction

https://github.com/hyunbinseo/svelte-kit-15104

When experimental async is enabled:

• Form passes pre-flight validation and is submitted to the server
• fieldset disabled is set in DOM
• onchange callback is called
• incorrect validation error is shown

<form
  {...submitEmail.preflight(PublicSchema)}
  onchange={(e) => {
    // difference in fieldset disabled attribute
    // only disabled in async + submit with enter
    console.log(e.currentTarget);
    submitEmail.validate({ preflightOnly: true });
  }}
>

Logs

System Info

System:
  OS: Windows 11 10.0.26200
  CPU: (8) x64 Intel(R) Core(TM) Ultra 7 258V
  Memory: 6.52 GB / 31.48 GB
Binaries:
  Node: 24.12.0 - C:\Users\hyunb\AppData\Local\fnm_multishells\2816_1766925321568\node.EXE
  Yarn: 1.22.22 - C:\Users\hyunb\AppData\Local\fnm_multishells\2816_1766925321568\yarn.CMD
  npm: 11.6.2 - C:\Users\hyunb\AppData\Local\fnm_multishells\2816_1766925321568\npm.CMD
  pnpm: 10.26.2 - C:\Users\hyunb\AppData\Local\fnm_multishells\2816_1766925321568\pnpm.CMD
  Deno: 2.4.0 - C:\Users\hyunb\.deno\bin\deno.EXE
Browsers:
  Chrome: 143.0.7499.170
  Edge: Chromium (140.0.3485.54)
  Firefox: 146.0.1 - C:\Program Files\Mozilla Firefox\firefox.exe
  Firefox Developer Edition: 147.0 - C:\Program Files\Firefox Developer Edition\firefox.exe
npmPackages:
  @sveltejs/adapter-auto: ^7.0.0 => 7.0.0
  @sveltejs/kit: ^2.49.1 => 2.49.2
  @sveltejs/vite-plugin-svelte: ^6.2.1 => 6.2.1
  svelte: ^5.45.6 => 5.46.1
  vite: ^7.2.6 => 7.3.0

Severity

annoyance

Additional Information

No response

[Rishab49]

The reason of this behaviour is that when we press enter following happens

1. both change and submit event gets triggered but the validate inside the change callback waits for the next cycle(await tick()) before validating the formData.
2. by the time next cycle starts the submit function has already started execution, making the fieldset disabled which makes fieldset formData empty object and submit makes an async request to remote function.
3. After this next cycle starts which causes validate function to resume execution but throw Invalid key: Expected "email" but received undefined.
4. after this validate function finishes the execution the response of async remote function is evaluated and enables the fieldset.

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

Lines 533 to 541 in 9e9fd2d

	// wait a tick in case the user is calling validate() right after set() which takes time to propagate
	await tick();
	const default_submitter = /** @type {HTMLElement | undefined} */ (
	element.querySelector('button:not([type]), [type="submit"]')
	);
	const form_data = new FormData(element, default_submitter);

this happens specifically in async mode because tick function pauses the execution till next cycle only in async mode

https://github.com/sveltejs/svelte/blob/965bf6ceec0c6ee5347df6b04781fe9fe41aa5a5/packages/svelte/src/internal/client/runtime.js#L468-L480

as temporary solution we can use css to disable ui or using oninput inplace of onchange(but this does not solves the problem :( )

[hyunbinseo]

I can confirm that this works.

<form
  {...sendCode.preflight(PublicSendCodeSchema)}
  onchange={async () => {
    await tick();
    console.log(sendCode.pending); // 1
    if (!sendCode.pending) sendCode.validate({ preflightOnly: true });
  }}
>

Didn't know that validate returned a Promise<void> since this is the example I saw. #14744 (comment)

<form
  {...myform.preflight(schema)}
  oninput={() => myform.validate({ preflightOnly: true })}
  onchange={() => myform.validate()}
>...</form>

Maybe the solution would be to NOT run the validation while the form submissions are pending?

I don't necessarily need the top-level <fieldset disabled> as long as I can stop duplicate submissions.