react-hook-form / resolvers

📋 Validation resolvers: Yup, Zod, Superstruct, Joi, Vest, Class Validator, io-ts, Nope, computed-types, typanion, Ajv, TypeBox, ArkType, Valibot, effect-ts and VineJS
https://react-hook-form.com/
MIT License
1.72k stars 157 forks source link

[valibot] Validation errors reported by ‘checkItems’ are not displayed properly #707

Open Thanaen opened 1 month ago

Thanaen commented 1 month ago

Describe the bug Validation errors reported by ‘checkItems’ should be displayed in the same way as other errors

To Reproduce Steps to reproduce the behavior:

  1. Focus the first input
  2. Insert "t"
  3. Submit (to trigger a length error)
  4. Update the input value to "value"
  5. Add another input using the "Add input" button
  6. Insert "value" in the newly added input
  7. Submit

Codesandbox link (Required) https://stackblitz.com/edit/vitejs-vite-yj5g5r?file=src%2FApp.tsx

Expected behavior Validation errors reported by ‘checkItems’ should be displayed in the same way as other errors

Form schema:

const FormSchema = v.object({
  test: v.pipe(
    v.array(
      v.object({
        value: v.pipe(v.string(), v.minLength(4)),
      })
    ),
    v.checkItems(
      (item, index, values) =>
        values.map((v) => v.value).indexOf(item.value) === index,
      'Duplicate items'
    )
  ),
});

Error displayed properly: image

Error not displayed properly: image

Additional context

"dependencies": {
    "@hookform/resolvers": "^3.9.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.52.1",
    "valibot": "^0.36.0"
  }