UForm: `error` event is fired only on `submit`

[adrianogiannacco]

Environment

• Operating System: Linux
• Node Version: v18.18.0
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: npm@10.2.3
• Builder: -
• User Config: modules
• Runtime Modules: @nuxt/ui@2.15.2
• Build Modules: -

Version

v2.15.2

Reproduction

https://stackblitz.com/edit/nuxt-ui-baglbg

Description

Hello, I think I'm misunderstanding the UForm documentation, but from what I read in the Props I'm expecting the error event to be fired by the default not only when one tries to submit the form, but also on every change of the state, on every blur and on every input event of the various inputs (depending on how you customize the validateOn prop). In the linked example I would expect the console.log('onError') to shows up on any of this events, but it's fired only on submit. I specified :validate-on="['blur', 'input', 'submit', 'change']" on the form, and I have eagerValidation set to true on the FormGroups. I'm probably missing something. Thanks in advance, for any help would be greatly appreciated.

Additional context

No response

Logs

No response

[adrianogiannacco]

Just wanted to add that I also tried with the edge version: "@nuxt/ui": "npm:@nuxt/ui-edge@latest"

Thanks again

[romhml]

That's right, the @error is meant to be fired when a submit fails, it's not triggered when validating after input events. I'll update the documentation to make it clearer.

Do you have a particular use case in mind where triggering it on input event would be useful?

[adrianogiannacco]

Hello, thanks for the quick reply. In my case the need is to validate the form and to get the errors array (and store it in a Pinia module, by the way) every time the user inputs or blur one of the fields. May I ask what are the usecases for the values blur, input and changeof the validateOn prop then? I'm asking because I can't get it from the docs, and reading other issues like this one made me think that they would fire the validation as I was expecting in the initial description. Thank you

[romhml]

The validate-on prop allows to control which input events will trigger validation, for example :validate-on="['blur']" will validate inputs only when they are blurred.

This doesn't submit the form. It just checks the input for errors and displays them to provide immediate feedback after interacting with an input.

Regarding your use-case, I can't think of any nice way to implement it with the Form component, have you tried accessing errors using the components API?

I'll think of whether it makes sense to emit errors from input events in the next major version.

[adrianogiannacco]

Hello, thanks for the reply and for the explanation. Just wanted to add, a classical implementation of what I am trying to do is having the submit button disabled right from the start and enable it only when every field is filled and every error in the form is solved.

I managed to do what I wanted with a template ref on the form and a watcher on it. Listening just to form events would be cleaner and probably faster.

What I have now:

const form = ref()

watch(
  () => form.value?.errors,
  () => {
    const errors = schema.safeParse(state).error?.errors)
    // do what you need to do with errors
  },
)