Nuxt•4mo ago

NuxtUI Form doesn't trigger submit

I've got a form to create a new data structure in the db, but the submit handler is not being activated. Here's the nuxt page source: https://gist.githubusercontent.com/partap/6a387488bd8927e7a197da043bc8e454/raw/479d5151e2d6d03f0936dc4943d7787d2715652a/new.vue

3 Replies

kapa.ai•4mo ago

Hi @partap. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources provided do not include the specific code from your linked Gist, so I cannot directly review your implementation. However, I can outline the most common reasons why a NuxtUI <UForm> submit handler might not be triggered, based on the official documentation: 1. Missing or Incorrect @submit Handler
Ensure you are using the @submit event on the <UForm> component and that your handler is correctly defined. For example:

   <UForm :state="state" @submit="onSubmit">
     <!-- form fields -->
   </UForm>

   <UForm :state="state" @submit="onSubmit">
     <!-- form fields -->
   </UForm>

The handler should look like:

   async function onSubmit(event) {
     // handle submission
   }

   async function onSubmit(event) {
     // handle submission
   }

The event type is usually FormSubmitEvent<T> if you want type safety. 2. Button Type
Make sure your submit button inside the form has type="submit":

   <UButton type="submit">Submit</UButton>

   <UButton type="submit">Submit</UButton>

If you use a button without type="submit", it may not trigger the form submission. 3. Validation Blocking Submission
If you have validation logic (via the schema or validate prop), the form will not submit if validation fails. Check if your form fields are passing validation. You can listen to the @error event to debug validation errors:

   <UForm @error="onError" ... />

   <UForm @error="onError" ... />

   function onError(event) {
     console.log(event.errors)
   }

   function onError(event) {
     console.log(event.errors)
   }

See: Input Events & Error Event 4. Reactive State
The state prop must be a reactive object. If you pass a plain object, the form may not work as expected:

   const state = reactive({ ... })

   const state = reactive({ ... })

5. Form Nesting or Structure
If you have nested forms or complex structures, ensure you are not accidentally preventing the parent form's submission. If you check these points and still have issues, please provide the relevant code snippet here so I can give more targeted help. The knowledge sources do not contain enough information to diagnose your specific code without seeing it. For more details and working examples, see the NuxtUI Form documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@514241592459264010> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

dwol•4mo ago

Make sure there's no validation errors in the form, submit won't be executed if there are any validation errors.

Gaming

Programming

NuxtUI Form doesn't trigger submit

Did you find this page helpful?