Eager validation not working as expected
spencerjsmall opened this issue · comments
Environment
- Operating System: Darwin
- Node Version: v20.11.1
- Nuxt Version: 3.11.2
- CLI Version: 3.11.1
- Nitro Version: 2.9.6
- Package Manager: pnpm@8.14.0
Version
v2.15.1
Reproduction
https://ui.nuxt.com/components/form-group#eager-validation
Description
Hi there, loving the form component with Zod validation so far. However, I believe the eager-validation prop isn't working as expected (see docs). Am I wrong for assuming that the field should be validated immediately (before blur)? This is not the case in the docs or in my project, unfortunately. Would greatly appreciate this fix, thank you!
Additional context
No response
Logs
No response
Yes, using eager-validation will validate the input directly and won't wait for an initial blur. That's the behaviour I'm seeing in the documentation too:
Screen.Recording.2024-05-11.at.14.38.16.mov
Would you mind sharing a reproduction of your project's form using stackblitz so I can have a look?
My apologies, I assumed eager validation meant the form would validate onMount, not just onChange. Given that this is my desired UX, I guess I can validate the form onMount using Zod and push the errors to the form to show immediate warnings?
You should also be able to attach a ref to your UForm, and use one of the methods exposed on it. See API reference
You can use the validate method to achieve this on mount.