nuxt
Custom Form Validation
Environment
- Operating System: Darwin
- Node Version: v22.2.0
- Nuxt Version: 3.12.4
- CLI Version: 3.12.0
- Nitro Version: 2.9.7
- Package Manager: [email protected]
- Builder: -
- User Config: runtimeConfig, site, app, ssr, routeRules, compatibilityDate, future, devtools, extends, ui, modules, plausible, eslint
- Runtime Modules: @nuxt/[email protected], @nuxt/ui, @nuxt/[email protected], @nuxt/[email protected], @vueuse/motion/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], [email protected], [email protected]
Version
latest
Reproduction
https://stackblitz.com/edit/nuxt-ui-jnwh5u?file=app.vue
Description
Hi @benjamincanac
Hope you well.
Not sure if this is a bug, but when using an if else in custom form validation even though errors are cleared from errors[] doesnt clear ui until you re-click submit.
Additional context
No response
Logs
No response
Not sure I understand the issue here, errors are updated after interacting with the inputs in the reproduction you provided. Errors are updated on submit or input events. What behaviour are you expecting?
Hey @romhml,
Issue I am facing is that only the single select that was interacted with is being updated on input even though in the validate function if all are equal to zero I want the message to be updated for all of them.
Basically some validation occurs on input, but it only occurs for interacted field - there are cases (like when using zod's refine or superRefine) that you have a set of 3 inputs that should be considered "as one validation rule" so that user gets correct feedback for those inputs (like in this use case that if it is they all are zero they all should have a validation message before submit).
Does that make more sense?
This is expected, we only update errors for the input that has been interacted with. If you want to tie the validation for these three inputs you have to group them under the same FormGroup element like so: https://stackblitz.com/edit/nuxt-ui-gbdc1x?file=app.vue
Hey @romhml,
Thanks for this, do get the logic - though think that it should work even not in the same form group since then you are restricted to the ui form group definition for all inputs that are part of a single validation rule. For example how would you set a different label for each input when using this?
It won't be possible to set different label with the example I gave you. Another work around would be to use form.setErrors in the validate function to update the error of related inputs.
Hey @romhml
Yip. That is exactly what I have done @change to custom clear and setErrors.
Don't you think this should be fixed? Think using refine for eg in Zod or or in joi is super common and makes it a pain to use this form component?
Closing this since validating the entire form on each input event would introduce too much noise. If needed you can trigger the validation using the validate function on an input's event handler.