Error set on the server with setError didn't show up when submitting the form with an enter keypress.

Author: ciscoheat

CHANGELOG.md

@@ -5,6 +5,12 @@ Headlines: Added, Changed, Deprecated, Removed, Fixed, Security
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Fixed
+
+- Error set on the server with `setError` didn't show up when submitting the form with an enter keypress.
+
 ## [1.13.3] - 2024-01-14
 
 ### Fixed

src/lib/client/formEnhance.ts

@@ -369,6 +369,10 @@ export function formEnhance<T extends AnyZodObject, M>(
             ? submit.formData
             : (submit as { data: FormData }).data;
 
+        // Prevent input/blur events to trigger client-side validation,
+        // and accidentally removing errors set by setError
+        lastChanges.set([]);
+
         if (options.SPA) {
           cancel(false);
 

src/routes/Navigation.svelte

@@ -35,6 +35,7 @@
     <li><a href="/tests/array-component">Array proxy</a></li>
     <li><a href="/tests/redirect-same-route">Redirect with delay</a></li>
     <li><a href="/tests/strict-mode">Strict mode</a></li>
+    <li><a href="/tests/submit-enter">Submit with enter</a></li>
   </ul>
 </nav>
 

src/routes/tests/submit-enter/+page.server.ts

@@ -0,0 +1,23 @@
+import { superValidate, setError } from '$lib/server/index.js';
+import { schema } from './schema.js';
+
+import type { Actions, PageServerLoad } from './$types.js';
+
+///// Load function /////
+
+export const load: PageServerLoad = async () => {
+  const form = await superValidate(schema);
+  return { form };
+};
+
+///// Form actions /////
+
+export const actions: Actions = {
+  default: async ({ request }) => {
+    const form = await superValidate(request, schema);
+
+    console.log('POST', form);
+
+    return setError(form, 'name', 'some error');
+  }
+};

src/routes/tests/submit-enter/+page.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { superForm } from '$lib/client/index.js';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+  import { schema } from './schema.js';
+
+  export let data;
+
+  const { form, errors, enhance } = superForm(data.form, {
+    validators: schema,
+    taintedMessage: false
+  });
+</script>
+
+<SuperDebug data={$form} />
+
+<h3>Superforms testing ground</h3>
+
+<p>
+  Pressing enter and clicking submit should both display a server-side only
+  error.
+</p>
+
+<form method="POST" use:enhance>
+  <label>
+    Name<br />
+    <input
+      name="name"
+      aria-invalid={$errors.name ? 'true' : undefined}
+      bind:value={$form.name}
+    />
+    {#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
+  </label>
+
+  <label>
+    Password<br />
+    <input
+      name="password"
+      type="password"
+      aria-invalid={$errors.password ? 'true' : undefined}
+      bind:value={$form.password}
+    />
+    {#if $errors.password}<span class="invalid">{$errors.password}</span
+      >{/if}
+  </label>
+
+  <button>Submit</button>
+</form>
+
+<hr />
+<p>
+  <a target="_blank" href="https://superforms.rocks/api">API Reference</a>
+</p>
+
+<style>
+  .invalid {
+    color: red;
+  }
+
+  input {
+    background-color: #ddd;
+  }
+
+  a {
+    text-decoration: underline;
+  }
+
+  hr {
+    margin-top: 4rem;
+  }
+
+  form {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+</style>

src/routes/tests/submit-enter/schema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+	name: z.string().min(1),
+	password: z.string().min(1)
+});