Submit the form with a button outside the form

[anardil]

Hello,

I use the component <Form>.
I have the button submit outside the form.
Do you know how I can trigger the event submit or call the validate function with Vee-validate 4, please?

Thank you.

Regards.

[larrasu]

Have you figured out how to do this?
I tried using a ref for the form:

const form = ref()

// works but refreshes the page
form.value.submit()

// doesn't work
form.value.dispatchEvent(new Event('submit')

[sadeghbarati]

You can use form attribute on the button (which is outside of the form)

like

<form id="uniqueFormId">
    ...
</form>

<button form="uniqueFormId">submit</button>

[Niehaus]

Well, I tryied but it doesn't work

[sadeghbarati]

https://stackblitz.com/edit/vitejs-vite-hg9fki

[larrasu]

The reproduction doesn't work as well.

[Niehaus]

It worked well for me, and I made a dynamic form out of it!