Custom Form Validation

[moshetanzer]

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: pnpm@9.4.0
• Builder: -
• User Config: runtimeConfig, site, app, ssr, routeRules, compatibilityDate, future, devtools, extends, ui, modules, plausible, eslint
• Runtime Modules: @nuxt/eslint@0.3.13, @nuxt/ui, @nuxt/fonts@0.7.1, @nuxt/image@1.7.0, @vueuse/motion/nuxt@2.2.3, @nuxtjs/plausible@1.0.0, @nuxtjs/html-validator@1.8.2, @nuxtjs/sitemap@5.3.5, nuxt-link-checker@3.1.0, nuxt-security@2.0.0-rc.9

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

[moshetanzer]

@romhml any clues?

[romhml]

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?

[moshetanzer]

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?

[romhml]

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

[moshetanzer]

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?

[romhml]

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.

[moshetanzer]

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?