Array errors were always added, even if the form wasn't tainted.

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
+
+- [Array errors](https://superforms.rocks/concepts/error-handling#form-level-and-array-errors) were always added, even if the form wasn't tainted.
+
 ## [1.7.4] - 2023-09-29
 
 ### Fixed

src/lib/client/clientValidation.ts

@@ -223,7 +223,8 @@ async function _clientValidation<T extends AnyZodObject, M = unknown>(
 export async function validateObjectErrors<T extends AnyZodObject, M>(
   formOptions: FormOptions<T, M>,
   data: z.infer<T>,
-  Errors: SuperForm<T, M>['errors']
+  Errors: SuperForm<T, M>['errors'],
+  tainted: TaintedFields<UnwrapEffects<T>> | undefined
 ) {
   if (
     typeof formOptions.validators !== 'object' ||
@@ -252,7 +253,17 @@ export async function validateObjectErrors<T extends AnyZodObject, M>(
       // Add new object-level errors and tainted field errors
       traversePaths(newErrors, (pathData) => {
         if (pathData.key == '_errors') {
-          return setPaths(currentErrors, [pathData.path], pathData.value);
+          // Check if the parent path (the actual array) is tainted
+          // Form-level errors are always "tainted"
+          const taintedPath =
+            pathData.path.length == 1
+              ? { value: true }
+              : tainted &&
+                traversePath(tainted, pathData.path.slice(0, -1) as any);
+
+          if (taintedPath && taintedPath.value) {
+            return setPaths(currentErrors, [pathData.path], pathData.value);
+          }
         }
       });
 
@@ -387,7 +398,7 @@ async function _validateField<T extends ZodValidation<AnyZodObject>, M>(
     if (tainted === undefined) return false;
     const leaf = traversePath(tainted, path as FieldPath<typeof tainted>);
     if (!leaf) return false;
-    return leaf.value === true;
+    return leaf.value;
   }
 
   function Errors_update(updater: Parameters<typeof Errors.update>[0]) {
@@ -468,14 +479,23 @@ async function _validateField<T extends ZodValidation<AnyZodObject>, M>(
 
           // Add new object-level errors and tainted field errors
           traversePaths(newErrors, (pathData) => {
-            if (pathData.key == '_errors') {
+            if (
+              pathData.key == '_errors' &&
+              (pathData.path.length == 1 ||
+                Tainted_isPathTainted(
+                  pathData.path.slice(0, -1),
+                  taintedFields
+                ))
+            ) {
               return setPaths(
                 currentErrors,
                 [pathData.path],
                 pathData.value
               );
             }
+
             if (!Array.isArray(pathData.value)) return;
+
             if (Tainted_isPathTainted(pathData.path, taintedFields)) {
               setPaths(currentErrors, [pathData.path], pathData.value);
             }

src/lib/client/index.ts

@@ -725,7 +725,12 @@ export function superForm<
           updated = updated || (await Tainted__validate(path, taintOptions));
         }
         if (!updated) {
-          await validateObjectErrors(options, get(Form), Errors);
+          await validateObjectErrors(
+            options,
+            get(Form),
+            Errors,
+            get(Tainted)
+          );
         }
       }
     }

src/routes/tests/array-error-tainted/+page.server.ts

@@ -0,0 +1,31 @@
+import { superValidate, message, setError } from '$lib/server';
+import { fail } from '@sveltejs/kit';
+import { schema } from './schema';
+import type { Actions, PageServerLoad } from './$types';
+
+///// 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);
+
+    const data = form.data;
+
+    if (!data.days?.length) {
+      setError(form, 'days._errors', 'You have to select at least one day!');
+    }
+
+    console.log('POST', form);
+
+    if (!form.valid) return fail(400, { form });
+
+    return message(form, 'Form posted successfully!');
+  }
+};

src/routes/tests/array-error-tainted/+page.svelte

@@ -0,0 +1,121 @@
+<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 Days = [
+    'Saturday',
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday'
+  ];
+
+  const { form, errors, message, tainted, enhance } = superForm(data.form, {
+    validators: schema,
+    taintedMessage: null
+  });
+</script>
+
+<SuperDebug data={{ $form, $tainted }} />
+
+<h3>Superforms testing ground</h3>
+
+{#if $message}
+  <div
+    class="status"
+    class:error={$page.status >= 400}
+    class:success={$page.status == 200}
+  >
+    {$message}
+  </div>
+{/if}
+
+<button on:click={() => ($form.days = [...$form.days, 3])}
+  >Set Tuesday</button
+>
+
+<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>
+
+  <div class="checkboxes">
+    {#each Days as day, i}
+      <div class="checkbox">
+        <input
+          id="wday-{i}"
+          type="checkbox"
+          name="days"
+          value={i}
+          bind:group={$form.days}
+          class="w-4 h-4 text-skin-accent bg-skin-fg rounded focus:ring-skin-accent focus:ring-2 cursor-pointer"
+        />
+        <label for="wday-{i}" class="ml-2 text-sm font-medium cursor-pointer"
+          >{day}</label
+        >
+      </div>
+    {/each}
+  </div>
+  <p class="invalid">{$errors.days?._errors || 'No error'}</p>
+  <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;
+  }
+  .checkboxes,
+  .checkbox {
+    display: flex;
+  }
+</style>

src/routes/tests/array-error-tainted/schema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+  name: z.string().min(2),
+  days: z.number().min(0).max(6).array().nonempty()
+});