SPA support questions

[olehmisar]

1. Why is onUpdate used to submit a form in SPA mode without +page.ts? https://superforms.rocks/concepts/spa#without-a-pagets-file
2. How to reset a form after it's submitted?
3. How to reset a form manually?

[ciscoheat]

1. It's the most convenient point to modify the validation result before it's updating the form.
2. The resetForm option for superForm is default true and will reset the form automatically when a successful validation result occurs.
3. Use the reset method on the superForm object.

[olehmisar]

1. I mean, why is onUpdate used instead of onSubmit?

[ciscoheat]

onSubmit happens when the form is submitted, so you can cancel the submission, modify its data, etc. Then the validation occurs, and the result is sent to onUpdate so you can use the form data in a call to an external API, which is common for SPA forms.

[olehmisar]

It does not make sense for me. Sending data to an external api should happen in onSubmit, no? Look at react formik https://formik.org/docs/overview#the-gist

[ciscoheat]

No, it should happen when the data is valid and conveniently at hand, that's in onUpdate. onSubmit happens before the data is validated.

[olehmisar]

@ciscoheat i am confused. In regular (server side) forms, the data is sent to the server when user clicks <button type="submit">. I would expect the same behaviour from an SPA form: user fills all inputs and clicks on a "submit" button that would trigger an onSubmit event or something like that. I don't understand why you propose to submit data in an onUpdate event.

[ciscoheat]

Without SPA:

1. Data is submitted to the server after the onSubmit event, so you can cancel the submission.
2. On the server, you call superValidate and eventually the server sends that result back to the client.
3. The result eventually ends up in the onUpdate event, where you can modify it before the form is updated.

Compare this to a SPA:

1. Data is submitted to the schema validation after the onSubmit event, so you can cancel the submission.
2. Schema validation runs (on the client) and returns the same result as superValidate would from the server.
3. The result eventually ends up in the onUpdate event, where you can modify it before the form is updated. For example by calling an external API and map the eventual errors from there to the result.

If you're still confused, read the SPA page and try harder to understand, many people are using it without problem. https://superforms.rocks/concepts/spa

[claesnn]

While it's correct that many people are using superforms without problems and it's the preferred solution for svelte. That being said, if people are accustomed to client-side focused form libraries, onSubmit would be the most commonly associated function to use for handling form submission (even after validation), like in TanStack Form and React Hook Form. As you're going against common practise in this case, I think it could be ideally highlighted to a greater deal in the documentation.