formStore.element.submit() causes page reload at Qwik

[genki]

I would like the form to submit programmatically equivalent to the manual submit.
But I couldn't find the recommended way to do that in document.
So I call the formStore.element.submit() but it reload the page, although the form doesn't reload when to submit manually.
How we can correctly submit the form programmatically with validation and without to reload?

[fabian-hiller]

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

[genki]

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?

[fabian-hiller]

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

[genki]

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

[genki]

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.

[fabian-hiller]

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

[genki]

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

[genki]

@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.

[fabian-hiller]

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

[genki]

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

[katywings]

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

[fabian-hiller]

form.element.requestSubmit();

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

[katywings]

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

[fabian-hiller]

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.