vee-validate
vee-validate copied to clipboard
Weird error messages with Valibot unions
What happened?
https://github.com/user-attachments/assets/f025aba6-4a53-4327-9e83-8d1d73a5ebd2
I'm trying to use a Valibot union. Each alternative in the union is an object called b. In the given example the union is either an object with a single proptery b1 of type number and a minimum of 1 or an object with a single property b2 of type number and a minimum of 1.
Observed "problems"
- The union is immediately validated, before any form input happens if no
initialValuesis used or bothb1andb2are set to an invalid initial value - Binding
b1andb2to a number input, and setting both to0, leads to a useless error message saying"b": "Invalid type: Expected Object but received Object", but if one number input is set to0and the other one is empty, then the error message becomes useful"b.b1": "Invalid value: Expected >=1 but received 0"
I am aware of the fact that Valibot nests issues only when using unions, but I had a quick look a the source code of the @vee-validate/valibot package and you seem to use some kind of flatten function, but maybe there is something missing?
After all, I am not entirely sure if this is solely a vee-validate issue.
Besides the mentioned problems above, I'm curious why an untouched empty number input is treated like undefined, but a touched empty number input is treated like an empty string, as you can see with the a field in the video.
Reproduction steps
See demo link
Version
Vue.js 3.x and vee-validate 4.x
What browsers are you seeing the problem on?
- [ ] Firefox
- [x] Chrome
- [ ] Safari
- [ ] Microsoft Edge
Relevant log output
No response
Demo link
https://stackblitz.com/~/github.com/Sector6759/vee-validate-valibot
Code of Conduct
- [X] I agree to follow this project's Code of Conduct