From 1151cc574849564b33dae0ccbdfe3a613d9763bc Mon Sep 17 00:00:00 2001
From: Solant <runner62v6@gmail.com>
Date: Mon, 1 Jun 2026 21:58:08 +0200
Subject: [PATCH 1/3] fix!: allow multiple errors per field

---
 .../varden/src/components/VardenError.vue     |  6 +--
 .../varden/src/components/VardenField.spec.ts |  4 +-
 .../varden/src/components/VardenField.vue     |  4 +-
 packages/varden/src/composables.ts            | 14 +++----
 packages/varden/src/field-metadata.ts         |  4 +-
 packages/varden/src/index.ts                  |  2 +-
 packages/varden/src/lib.ts                    | 41 +++++++++++--------
 packages/varden/src/standard-schema.ts        | 20 ++++++++-
 8 files changed, 59 insertions(+), 36 deletions(-)

diff --git a/packages/varden/src/components/VardenError.vue b/packages/varden/src/components/VardenError.vue
index 33377b9..3bb3a47 100644
--- a/packages/varden/src/components/VardenError.vue
+++ b/packages/varden/src/components/VardenError.vue
@@ -1,16 +1,16 @@
 <script lang="ts" setup generic="T, Path extends Paths<T>">
 import type { Paths } from '../path';
 import type { FormContext } from '../lib';
-import { useFieldError } from '../composables';
+import { useFieldErrors } from '../composables';
 
 const props = defineProps<{
   form: FormContext<T>;
   path: Path;
 }>();
 
-const error = useFieldError(props.form, props.path);
+const errors = useFieldErrors(props.form, props.path);
 </script>
 
 <template>
-  <slot :error />
+  <slot :errors />
 </template>
diff --git a/packages/varden/src/components/VardenField.spec.ts b/packages/varden/src/components/VardenField.spec.ts
index e050296..0eb6e90 100644
--- a/packages/varden/src/components/VardenField.spec.ts
+++ b/packages/varden/src/components/VardenField.spec.ts
@@ -24,7 +24,7 @@ describe('meta management', () => {
       // @ts-expect-error typed vue component
       props: { form, path: 'name' },
       slots: {
-        default: ({ field, error }: { field: { modelValue: string }; error: string | null }) => h('div', [
+        default: ({ field, errors }: { field: { modelValue: string }; errors: readonly string[] | null }) => h('div', [
           h('input', {
             'data-testid': 'name-input',
             value: field.modelValue,
@@ -33,7 +33,7 @@ describe('meta management', () => {
               field.modelValue = (e.target as HTMLInputElement).value;
             },
           }),
-          h('span', { 'data-testid': 'error' }, error ?? ''),
+          h('span', { 'data-testid': 'error' }, errors?.[0] ?? ''),
         ]),
       },
     });
diff --git a/packages/varden/src/components/VardenField.vue b/packages/varden/src/components/VardenField.vue
index bfe0d1e..78070a5 100644
--- a/packages/varden/src/components/VardenField.vue
+++ b/packages/varden/src/components/VardenField.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
 const [
   modelValue,
   onBlur,
-  error,
+  errors,
 ] = useField(props.form, props.path);
 
 function update(value: Get<T, Path>) {
@@ -22,6 +22,6 @@ function update(value: Get<T, Path>) {
 <template>
   <slot
     :field="{ modelValue, 'onUpdate:modelValue': update, onBlur }"
-    :error
+    :errors
   />
 </template>
diff --git a/packages/varden/src/composables.ts b/packages/varden/src/composables.ts
index 1c5af46..2f15e32 100644
--- a/packages/varden/src/composables.ts
+++ b/packages/varden/src/composables.ts
@@ -32,7 +32,7 @@ function acquireField<T, Path extends Paths<T>>(form: FormContext<T>, path: Path
     return;
   }
 
-  (form as _FormContext<T>).__meta.set(path, createFieldMeta(false, false, '', 1));
+  (form as _FormContext<T>).__meta.set(path, createFieldMeta(false, false, null, 1));
 }
 
 export function useFieldDirty<T, Path extends Paths<T>>(
@@ -75,11 +75,11 @@ export function useFieldValue<T>(
   });
 }
 
-export function useFieldError<T, Path extends Paths<T>>(
+export function useFieldErrors<T, Path extends Paths<T>>(
   form: FormContext<T>,
   path: MaybeRefOrGetter<Path>,
-): ComputedRef<string | null> {
-  return computed(() => form.getError(toValue(path)));
+): ComputedRef<Readonly<string[]> | null> {
+  return computed(() => form.getErrors(toValue(path)));
 }
 
 export function useField<T>(
@@ -88,15 +88,15 @@ export function useField<T>(
 ): [
   modelValue: WritableComputedRef<Get<T, Paths<T>>>,
   touch: () => void,
-  error: ComputedRef<string | null>,
+  errors: ComputedRef<Readonly<string[]> | null>,
 ] {
   const modelValue = useFieldValue(form, path);
   const touch = () => form.setTouched(toValue(path), true);
-  const error = useFieldError(form, path);
+  const errors = useFieldErrors(form, path);
 
   return [
     modelValue,
     touch,
-    error,
+    errors,
   ] as const;
 }
diff --git a/packages/varden/src/field-metadata.ts b/packages/varden/src/field-metadata.ts
index 7d8108c..3770726 100644
--- a/packages/varden/src/field-metadata.ts
+++ b/packages/varden/src/field-metadata.ts
@@ -1,14 +1,14 @@
 export interface FieldMeta {
   touched: boolean;
   dirty: boolean;
-  error: string | null;
+  error: string[] | null;
   refCount: number;
 }
 
 export function createFieldMeta(
   touched: boolean,
   dirty: boolean,
-  error: string | null,
+  error: string[] | null,
   refCount: number,
 ): FieldMeta {
   return {
diff --git a/packages/varden/src/index.ts b/packages/varden/src/index.ts
index 9b20abc..d3b5405 100644
--- a/packages/varden/src/index.ts
+++ b/packages/varden/src/index.ts
@@ -3,7 +3,7 @@ export {
 } from './lib';
 
 export {
-  useFieldValue, useFieldDirty, useFieldError, useFieldTouched, useField,
+  useFieldValue, useFieldDirty, useFieldErrors, useFieldTouched, useField,
 } from './composables';
 
 export { default as VardenForm } from './components/VardenForm.vue';
diff --git a/packages/varden/src/lib.ts b/packages/varden/src/lib.ts
index 081b401..08fa7de 100644
--- a/packages/varden/src/lib.ts
+++ b/packages/varden/src/lib.ts
@@ -8,7 +8,7 @@ import {
   type DeepReadonly,
 } from 'vue';
 
-import { getIssuePath, type StandardSchemaV1 } from './standard-schema';
+import { getIssues, type StandardSchemaV1 } from './standard-schema';
 import {
   type Paths, type Get, get, set, del, toCompiledPath,
   Empty,
@@ -46,7 +46,7 @@ export interface FormContext<T> {
   isTouched<Path extends Paths<T>>(path: Path): boolean;
   valid: Ref<boolean>;
   isDirty<Path extends Paths<T>>(path: Path): boolean;
-  getError<Path extends Paths<T>>(path: Path): string | null;
+  getErrors<Path extends Paths<T>>(path: Path): string[] | null;
   submit(): void;
   pop<Path extends ArrayPaths<T>>(path: Path): undefined | GetArray<T, Path>;
   shift<Path extends ArrayPaths<T>>(path: Path): undefined | GetArray<T, Path>;
@@ -161,34 +161,41 @@ export function useForm<T, O>(props: FormProps<T, O>): FormContext<T> {
       outputValues = result.value;
     }
 
-    const issues = [...(result.issues ?? [])];
-    const paths = issues.map(getIssuePath);
+    const issues = getIssues(result.issues);
 
     valid.value = issues.length === 0;
 
     for (const [field, meta] of fields) {
-      const index = paths.indexOf(field);
-      if (index === -1) {
-        meta.error = '';
+      const fieldIssues = issues.filter((val) => val.path === field);
+      if (fieldIssues.length === 0) {
+        meta.error = null;
         // eslint-disable-next-line no-continue
         continue;
+      } else {
+        meta.error = fieldIssues.map((val) => val.message);
       }
 
-      meta.error = issues[index]!.message;
-
-      issues.splice(index, 1);
-      paths.splice(index, 1);
+      for (let i = 0; i < fieldIssues.length; i += 1) {
+        issues.splice(issues.indexOf(fieldIssues[i]!), 1);
+      }
     }
     if (!issues.length) {
       return;
     }
 
     // proceed with unregistered paths
-    for (let index = 0; index < paths.length; index += 1) {
-      const path = paths[index]!;
-      const error = issues[index]!.message;
+    for (let index = 0; index < issues.length; index += 1) {
+      const { path, message } = issues[index]!;
+      if (!path) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
 
-      fields.set(path, createFieldMeta(false, false, error, 0));
+      if (fields.has(path)) {
+        fields.get(path)!.error!.push(message);
+      } else {
+        fields.set(path, createFieldMeta(false, false, [message], 0));
+      }
     }
   }
 
@@ -212,7 +219,7 @@ export function useForm<T, O>(props: FormProps<T, O>): FormContext<T> {
     if (meta) {
       meta.dirty = isDirty;
     } else {
-      fields.set(stringPath, createFieldMeta(false, isDirty, '', 0));
+      fields.set(stringPath, createFieldMeta(false, isDirty, null, 0));
     }
 
     // cleanup child fields
@@ -297,7 +304,7 @@ export function useForm<T, O>(props: FormProps<T, O>): FormContext<T> {
     isTouched<Path extends Paths<T>>(path: Path): boolean {
       return fields.get(path)?.touched ?? false;
     },
-    getError<Path extends Paths<T>>(path: Path): string | null {
+    getErrors<Path extends Paths<T>>(path: Path): string[] | null {
       return fields.get(path)?.error ?? null;
     },
     // arrays
diff --git a/packages/varden/src/standard-schema.ts b/packages/varden/src/standard-schema.ts
index e051375..8c0163e 100644
--- a/packages/varden/src/standard-schema.ts
+++ b/packages/varden/src/standard-schema.ts
@@ -68,9 +68,25 @@ export declare namespace StandardSchemaV1 {
   export type InferOutput<Schema extends StandardSchemaV1> = NonNullable<Schema['~standard']['types']>['output'];
 }
 
-export function getIssuePath(issue: StandardSchemaV1.Issue) {
+interface GenericIssue {
+  path?: string;
+  message: string;
+}
+
+export function getIssues(issues?: readonly StandardSchemaV1.Issue[]): GenericIssue[] {
+  if (issues === undefined) {
+    return [];
+  }
+
+  return issues.map((issue) => ({
+    path: getIssuePath(issue),
+    message: issue.message,
+  }));
+}
+
+function getIssuePath(issue: StandardSchemaV1.Issue) {
   if (!issue.path) {
-    return '';
+    return issue.path;
   }
 
   const propertyKeys = issue.path.map((p) => {

From a1ffbf205be44a8cceafbb439c0fc6e1c9494f48 Mon Sep 17 00:00:00 2001
From: Solant <runner62v6@gmail.com>
Date: Mon, 1 Jun 2026 22:00:36 +0200
Subject: [PATCH 2/3] docs: update readme

---
 packages/varden/README.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/varden/README.md b/packages/varden/README.md
index b055814..412608e 100644
--- a/packages/varden/README.md
+++ b/packages/varden/README.md
@@ -40,16 +40,16 @@ Remember to pass `form` prop to both form and field components and apply `field`
 
 <template>
   <varden-form :form>
-    <varden-input :form path="name" v-slot="{ field, error }">
+    <varden-input :form path="name" v-slot="{ field, errors }">
       <label>Name</label>
       <input v-bind="field" />
-      {{ error }}
+      {{ errors }}
     </varden-input>
 
-    <varden-input :form path="password" v-slot="{ field, error }">
+    <varden-input :form path="password" v-slot="{ field, errors }">
       <label>Password</label>
       <input v-bind="field" />
-      {{ error }}
+      {{ errors }}
     </varden-input>
     
     <button type="submit">Submit</button>
@@ -75,19 +75,19 @@ is more flexible but requires more boilerplate code. You can use it if you want
     },
   })
   
-  const [name, nameBlur, nameError] = form.useField('name')
-  const [password, passwordBlur, passwordError] = form.useField('password')
+  const [name, nameBlur, nameErrors] = form.useField('name')
+  const [password, passwordBlur, passwordErrors] = form.useField('password')
 </script>
 
 <template>
   <form @submit.prevent="form.submit" @reset.prevent="form.reset">
     <label>Name</label>
     <input v-model="name" @blur="nameBlur" />
-    {{ nameError }}
+    {{ nameErrors }}
 
-    <label>Name</label>
+    <label>Password</label>
     <input v-model="password" @blur="passwordBlur" />
-    {{ passwordError }}
+    {{ passwordErrors }}
 
     <button type="submit">Submit</button>
   </form>

From 92cbcfdd614d59164fb5f3a42a51ce604e2248bd Mon Sep 17 00:00:00 2001
From: Solant <runner62v6@gmail.com>
Date: Mon, 1 Jun 2026 22:39:02 +0200
Subject: [PATCH 3/3] tests: add `getErrors` test cases

---
 packages/varden/tests/form-errors.spec.ts | 38 +++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 packages/varden/tests/form-errors.spec.ts

diff --git a/packages/varden/tests/form-errors.spec.ts b/packages/varden/tests/form-errors.spec.ts
new file mode 100644
index 0000000..8efc3e3
--- /dev/null
+++ b/packages/varden/tests/form-errors.spec.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest';
+import * as v from 'valibot';
+
+import { useForm } from '../src/lib';
+
+describe('form errors', () => {
+  it('should return multiple errors for a field', () => {
+    const form = useForm({
+      onSubmit: () => {},
+      schema: v.object({
+        email: v.pipe(
+          v.string(),
+          v.minLength(5, 'too short'),
+          v.email('invalid email'),
+        ),
+      }),
+    });
+
+    form.setValue('email', 'a@');
+
+    const errors = form.getErrors('email');
+    expect(errors).toEqual(['too short', 'invalid email']);
+  });
+
+  it('should return null when field has no errors', () => {
+    const form = useForm({
+      onSubmit: () => {},
+      schema: v.object({
+        name: v.string(),
+      }),
+    });
+
+    form.setValue('name', 'valid');
+
+    const errors = form.getErrors('name');
+    expect(errors).toBeNull();
+  });
+});