Client-side validation didn't take refine into account a successful validation.

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
+
+- Client-side validation didn't take refine into account a successful validation, not clearing all errors.
+
 ## [1.6.0] - 2023-08-18
 
 ### Fixed

src/lib/client/clientValidation.ts

@@ -394,13 +394,8 @@ async function _validateField<T extends ZodValidation<AnyZodObject>, M>(
     Errors.update(updater);
   }
 
-  function Errors_clearFormLevelErrors() {
-    Errors.update(($errors) => {
-      traversePaths($errors, (path) => {
-        if (path.key == '_errors') return path.set(undefined);
-      });
-      return $errors;
-    });
+  function Errors_clearAll() {
+    clearErrors(Errors, { undefinePath: null, clearFormLevelErrors: true });
   }
 
   function Errors_fromZod(
@@ -504,8 +499,7 @@ async function _validateField<T extends ZodValidation<AnyZodObject>, M>(
         errors: options.errors ?? current?.value
       };
     } else {
-      // Clear form-level errors
-      Errors_clearFormLevelErrors();
+      Errors_clearAll();
       return { validated: true, errors: undefined };
     }
   } else {

src/routes/tests/refine-validation/+page.server.ts

@@ -0,0 +1,25 @@
+import { superValidate, message } from '$lib/server';
+import { fail } from '@sveltejs/kit';
+
+import { schema } from './schema';
+
+///// Load function /////
+
+export const load = async () => {
+  const form = await superValidate(schema);
+  return { form };
+};
+
+///// Form actions /////
+
+export const actions = {
+  default: async ({ request }) => {
+    const form = await superValidate(request, schema);
+
+    console.log('POST', form);
+
+    if (!form.valid) return fail(400, { form });
+
+    return message(form, 'Form posted successfully!');
+  }
+};

src/routes/tests/refine-validation/+page.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { superForm } from '$lib/client';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+  import { schema } from './schema';
+
+  export let data;
+
+  const { form, errors, message, constraints, enhance, tainted } = superForm(
+    data.form,
+    { validators: schema, taintedMessage: null }
+  );
+</script>
+
+<SuperDebug collapsible data={$tainted} />
+
+<h3>Superforms testing ground</h3>
+
+{#if $message}
+  <div
+    class="status"
+    class:error={$page.status >= 400}
+    class:success={$page.status == 200}
+  >
+    {$message}
+  </div>
+{/if}
+
+<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>
+    Second name<br />
+    <input
+      name="secondName"
+      aria-invalid={$errors.secondName ? 'true' : undefined}
+      bind:value={$form.secondName}
+    />
+    {#if $errors.secondName}<span class="invalid">{$errors.secondName}</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;
+  }
+
+  .status {
+    color: white;
+    padding: 4px;
+    padding-left: 8px;
+    border-radius: 2px;
+    font-weight: 500;
+  }
+
+  .status.success {
+    background-color: seagreen;
+  }
+
+  .status.error {
+    background-color: #ff2a02;
+  }
+
+  input {
+    background-color: #ddd;
+  }
+
+  a {
+    text-decoration: underline;
+  }
+
+  hr {
+    margin-top: 4rem;
+  }
+
+  form {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+</style>

src/routes/tests/refine-validation/schema.ts

@@ -0,0 +1,11 @@
+import { z } from 'zod';
+
+export const schema = z
+  .object({
+    name: z.string().min(1),
+    secondName: z.string().min(1)
+  })
+  .refine(({ name, secondName }) => name === secondName, {
+    message: 'Names must be the same',
+    path: ['secondName']
+  });