Add a way to display only one error for a field

[francois-pasquier]

Describe the bug

Currently we return field.state.meta.touchedErrors ValidationError[] as a string by concataining the different errors of a field with commas.

It would be great to be able to display only one error.

e.g:

         validators={{
            onChange: v.string([
              v.minLength(1, t(i18n)`This field is mandatory`),
              v.custom(isDateStringValid, t(i18n)`The birth date format is incorrect`),
              v.custom(isDateStringOver18, t(i18n)`You have to be at least 18 years`),
            ]),
          }}

These valibot validators will end up on showing all three errors just by typing a letter and deleting it.
Imo, this is not a good UX.

I would expect some kind of priority in the error messages, thus only displaying the first validation to return an error.

Your minimal, reproducible example

https://github.com/TanStack/form/

Steps to reproduce

     validators={{
        onChange: v.string([
          v.minLength(1, t(i18n)`This field is mandatory`),
          v.custom(isDateStringValid, t(i18n)`The birth date format is incorrect`),
          v.custom(isDateStringOver18, t(i18n)`You have to be at least 18 years`),
        ]),
      }}

Expected behavior

More control over the errors display

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

macOS

TanStack Form adapter

react-form

TanStack Form version

0.19.0

TypeScript version

No response

Additional context

No response

[crutchcorn]

This should be done at the validator level where you can pass transformErrors to transformErrors: errors => errors[0] rather than transformErrors: errors => errors.join(', ')

Will mark this as "Good first issue" and a feature request

[seobbang]

@crutchcorn Hello, can I work on this issue? If possible, please assign it to me. 😊

[jessekelly881]

Not sure if this is relevant to this issue or if I should create a separate one but being able to return an array from

validators={{
    onChange: ["err1", "err2"] // string | string[]
}}

instead of having to return a single .join("\n")ed string would be a very nice addition as well.