`formStore.element.submit()` causes page reload at Qwik about modular-forms HOT 14 CLOSED

Thanks :)
I've made this for workaround.
https://gist.github.com/genki/632d57ffc53a136521f486867756469b

from modular-forms.

Ok, feel free to create a PR for a submit method. Contact me on GitHub or Discord if you have any questions. Currently I prefer to use .requestSubmit(), but I am open to other options.

from modular-forms.

Did you check if the reload can be prevented by an argument or event.preventDefault()?

from modular-forms.

Sorry for less information.
I made a runnable example here
https://stackblitz.com/edit/modular-forms-qwik-p4noyg?file=src%2Froutes%2Flogin%2Findex.tsx

1. Fill the form and click submit button then the dialog will appear.
2. Focus on the textarea and hit the Command+Enter or Ctrl+Enter then the page will reload.

I would like to simulate the first behaviour for the second case. Is there a way to do that?

from modular-forms.

I don't know. Probably I would not use the "submit" function of the <form /> element and call a function directly instead.

from modular-forms.

I see. If I call the function directly, how can I validate the form?

from modular-forms.

For example, this comment form here is possible to submit by hitting Command+Enter with validation.
I would like to have this function for the modular-forms.

from modular-forms.

You can call validate: https://modularforms.dev/qwik/api/validate

from modular-forms.

I see, I will use it. Thank you :)

from modular-forms.

@fabian-hiller I have tried to call the validate() but found an issue that the setFieldErrors() and setErrorResponse() are not exported so that we can't set the issues to the form.
How about to make the submit(formStore) method in order to simulate the equivalent action of the manual form submit.

from modular-forms.

Oh, yes that's right. I will think about it. Until then, I recommend using validate with setResponse.

from modular-forms.

I tried to simplify the workaround a bit 😅, here is mine:

// Old-school solution:
// "cancelable" has to be true. It allows modular-forms to preventDefault that "submit".
form.element.dispatchEvent(new Event('submit', { cancelable: true, bubbles:true }));

// Or for modern browsers
form.element.requestSubmit();

@fabian-hiller Let me know if you are interested in a PR for a submit helper with one/both of these patterns.

Related discussion:
final-form/react-final-form#878 (comment)

requestSubmit Browsersupport: https://caniuse.com/mdn-api_htmlformelement_requestsubmit

from modular-forms.

form.element.requestSubmit();

Does this work without specifying a submitter as the first argument?

from modular-forms.

Yupp, in that case the form element itself is used as submitter :).

from modular-forms.