Form validation bug

[ivanmaxlogiudice]

Environment

- Operating System: `Windows_NT`
- Node Version:     `v23.9.0`
- Nuxt Version:     `3.16.0`
- CLI Version:      `3.22.5`
- Nitro Version:    `2.11.5`
- Package Manager:  `bun@1.2.4`
- Builder:          `-`
- User Config:      `compatibilityDate`, `future`, `devtools`, `experimental`, `modules`, `css`, `nitro`, `vite`, `devServer`, `runtimeConfig`, `security`
- Runtime Modules:  `@nuxt/ui@3.0.0-beta.3`, `@vueuse/nuxt@12.8.2`
- Build Modules:    `-`

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.0-beta.3

Reproduction

• Go to https://ui3.nuxt.dev/components/form#schema-validation
• Enter a valid email in the email field (with any validation library).
• Press enter

The form will be submited when it should not, it should throw error on password.

Grabacion.2025-03-08.221053.mp4

Description

I think this is what happens:

1. When pressing enter on the input a validation will take place (with a valid input).
2. It would trigger a form validation and validate all fields.
3. It would blur the input, causing a revalidation of the field input, and because the input is valid it will clear the errors.
4. The form will be submited as valid when it should not.

Additional context

No response

Logs

[romhml]

Looks like a browser compatibility issue, I don't experience the same behavior on Firefox. Might be related to how the submit event is captured here: https://github.com/nuxt/ui/blob/v3/src/runtime/components/Form.vue#L270.

The submit event of the Form component should not be triggered if the form is not valid. In your case, it looks like it is submitting without even validating the state.

[romhml]

Actually you were right, that's caused by a race condition between the validation on submit and on input events! Thanks!