Add a way to display only one error for a field
francois-pasquier opened this issue · comments
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
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
@crutchcorn Hello, can I work on this issue? If possible, please assign it to me. 😊
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.
@jessekelly881 let's open a different issue on it :)
@seobbang PRs welcome! No need to assign it out, but do feel free to tackle the issue :)