Preventing (almost) adding errors to nodes in the error structure.

Author: ciscoheat

src/compare.test.ts

@@ -363,6 +363,14 @@ test('Check path existence', () => {
   });
 });
 
+test('Check path existence with path longer than existing', () => {
+  const data = {
+    persons: ['Need at least 2 persons']
+  };
+
+  expect(pathExists(data, ['persons', '0', 'name'])).toBeUndefined();
+});
+
 const refined = z.object({
   id: z.number().int().positive(),
   name: z.string().min(2),

src/lib/client/index.ts

@@ -49,7 +49,8 @@ import {
   setPaths,
   pathExists,
   type ZodTypeInfo,
-  traversePaths
+  traversePaths,
+  isInvalidPath
 } from '../traversal.js';
 import { fieldProxy } from './proxies.js';
 import { clone } from '../utils.js';
@@ -642,7 +643,19 @@ export function superForm<
       const errorContent = get(Errors);
 
       const errorNode = errorContent
-        ? pathExists(errorContent, path)
+        ? pathExists(errorContent, path, {
+            modifier: (pathData) => {
+              // Check if we have found a string in an error array.
+              if (isInvalidPath(path, pathData)) {
+                throw new SuperFormError(
+                  'Errors can only be added to form fields, not to arrays or objects in the schema. Path: ' +
+                    pathData.path.slice(0, -1)
+                );
+              }
+
+              return pathData.value;
+            }
+          })
         : undefined;
 
       // Need a special check here, since if the error has never existed,
@@ -1089,7 +1102,12 @@ async function validateField<T extends AnyZodObject, M>(
           errors,
           path as FieldPath<typeof errors>,
           (node) => {
-            if (node.value === undefined) {
+            if (isInvalidPath(path, node)) {
+              throw new SuperFormError(
+                'Errors can only be added to form fields, not to arrays or objects in the schema. Path: ' +
+                  node.path.slice(0, -1)
+              );
+            } else if (node.value === undefined) {
               node.parent[node.key] = {};
               return node.parent[node.key];
             } else {
@@ -1251,7 +1269,7 @@ async function validateField<T extends AnyZodObject, M>(
       // We validated the whole data structure, so clear all errors on success
       // but also set the current path to undefined, so it will be used in the tainted+error
       // check in oninput.
-      Errors_clear({ undefinePath: path, clearFormLevelErrors: false });
+      Errors_clear({ undefinePath: path, clearFormLevelErrors: true });
       return undefined;
     }
   } else {

src/lib/traversal.ts

@@ -82,6 +82,34 @@ function setPath<T extends object>(parent: T, key: keyof T, value: any) {
   return 'skip' as const;
 }
 
+export function isInvalidPath(originalPath: string[], pathData: PathData) {
+  return (
+    pathData.value !== undefined &&
+    typeof pathData.value !== 'object' &&
+    pathData.path.length < originalPath.length
+  );
+}
+
+export function pathExists<T extends object>(
+  obj: T,
+  path: string[],
+  options: {
+    value?: (value: unknown) => boolean;
+    modifier?: (data: PathData) => undefined | unknown | void;
+  } = {}
+): PathData | undefined {
+  if (!options.modifier) {
+    options.modifier = (pathData) =>
+      isInvalidPath(path, pathData) ? undefined : pathData.value;
+  }
+
+  const exists = traversePath(obj, path as FieldPath<T>, options.modifier);
+  if (!exists) return undefined;
+
+  if (options.value === undefined) return exists;
+  return options.value(exists.value) ? exists : undefined;
+}
+
 export async function traversePathAsync<T extends object>(
   obj: T,
   realPath: FieldPath<T>,
@@ -124,18 +152,6 @@ export async function traversePathAsync<T extends object>(
   };
 }
 
-export function pathExists<T extends object>(
-  obj: T,
-  path: string[],
-  value?: (value: unknown) => boolean
-): PathData | undefined {
-  const exists = traversePath(obj, path as FieldPath<T>);
-  if (!exists) return undefined;
-
-  if (value === undefined) return exists;
-  return value(exists.value) ? exists : undefined;
-}
-
 export function traversePath<T extends object>(
   obj: T,
   realPath: FieldPath<T>,

src/routes/tests/issue-161/+page.server.ts

@@ -0,0 +1,25 @@
+import type { Actions, PageServerLoad } from './$types';
+import { message, superValidate } from '$lib/server';
+import { schema } from './schema';
+import { fail } from '@sveltejs/kit';
+
+///// Load //////////////////////////////////////////////////////////
+
+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);
+
+    if (!form.valid) return fail(400, { form });
+
+    return message(form, 'Form posted successfully!');
+  }
+};

src/routes/tests/issue-161/+page.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { superForm } from '$lib/client';
+  import type { PageData } from './$types';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+  import { page } from '$app/stores';
+  import { schema } from './schema';
+
+  export let data: PageData;
+
+  const { form, errors, tainted, message, enhance } = superForm(data.form, {
+    dataType: 'json',
+    validators: schema
+  });
+
+  function addPerson() {
+    form.update(
+      ($form) => {
+        $form.persons = [...$form.persons, { name: '' }];
+        return $form;
+      },
+      { taint: false }
+    );
+  }
+</script>
+
+<h3>#161</h3>
+
+{#if $message}
+  <div
+    class="status"
+    class:error={$page.status >= 400}
+    class:success={$page.status == 200}
+  >
+    {$message}
+  </div>
+{/if}
+
+<form method="POST" use:enhance>
+  {#if $errors._errors}
+    <div class="status error">{$errors._errors}</div>
+  {/if}
+
+  {#each $form.persons as p, i}
+    <label>
+      Name:
+      <input
+        name="name"
+        data-invalid={$errors.persons?.[i]?.name}
+        bind:value={p.name}
+      />
+      {#if $errors.persons?.[i]?.name}<span class="invalid"
+          >{$errors.persons?.[i]?.name}</span
+        >{/if}
+    </label>
+  {/each}
+
+  <button on:click|preventDefault={addPerson}>Add person</button>
+  <button>Submit</button>
+</form>
+
+<hr />
+<p>
+  <a target="_blank" href="https://superforms.vercel.app/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/issue-161/schema.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod';
+
+export const schema = z
+  .object({
+    persons: z.array(z.object({ name: z.string().min(1) }))
+  })
+  .refine((data) => (data.persons?.length ?? 0) >= 2, {
+    message: 'Need at least two persons'
+  });