You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Currently we return field.state.meta.touchedErrorsValidationError[] 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.
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
The text was updated successfully, but these errors were encountered:
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
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:
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
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
The text was updated successfully, but these errors were encountered: