use:enhance form and validation errors - should field values be returned

[hyunbinseo]

use:enhance resets the <form> element and invalidates all data using invalidateAll on a successful response.

Therefore, in a progressively enhanced <form>, if the form action returns a fail(), the <form> element is not reset.

---

Question is, assuming that the <form> is progressively enhanced, is there a need to return field values in fail()?

<form method="POST" use:enhance>
  <!-- On a validation error, this input is not reset. Value property is not necessary. -->
  <input name="email" type="email" value={form?.email ?? ''}>
</form>

---

The validation errors documentation illustrates that certain field values can be returned in a form action.

import { fail } from '@sveltejs/kit';

if (!user || user.password !== hash(password)) {
  return fail(400, { email, incorrect: true });
}

Note
Note that as a precaution, we only return the email back to the page — not the password.

<input name="email" type="email" value={form?.email ?? ''}>

[wwwdepot]

... is there a need to return field values in fail()?

Just an User Experience thing. This is totally up to the design. Do you want your users to re-type everything if the action fails?

If you don't know, go to other sites and see how they handle login form (enter random credentials and observe the error handling).

[hyunbinseo]

I just cannot get this to work on StackBlitz, so leaving the code snippet instead.

// src/routes/+page.server.js

import { fail } from '@sveltejs/kit';

export const actions = {
  success: () => ({}),
  fail: () => fail(400)
};

<!-- src/routes/+page.svelte -->

<script>
  import { enhance } from '$app/forms';
</script>

<form use:enhance method="post">
  <input type="text" placeholder="Enter any text." required />
  <button formaction="?/success">Success</button>
  <button formaction="?/fail">Fail</button>
</form>

If the (action fails && form is progressively enhanced), the user does not have to re-type everything.

Reproduction

1. Enter text in the input.
2. Press Success - the form gets resetted.
3. Enter text in the input.
4. Press Fail - the form does not get resetted.

[david-plugge]

This works as expected. You can disable form reset like so

<form
	use:enhance={() => ({ update }) => update({ reset: false })}
>
    ...
</form>

If you want to persist the state when javascript isnt active, you need to return the form values in your action alongside any errors https://kit.svelte.dev/docs/form-actions#anatomy-of-an-action-validation-errors

[hyunbinseo]

If you want to persist the state when javascript isn't active, you need to return the form values in your action.

This was the part I was curious about - it was not explicitly stated in the documentation. Thank you.