How to extend enhance default behavior?

[svex99]

I have a form fully connected with the Form component as suggested in the docs. I'm looking to send some feedback to the user on successful form submition.

How can I extend the default behavior, to send a toast, for example, but not to sacrifice the client side validation or other features? I'm aware that under the hood is used formsnap, but I couldn't find anything on its documentation neither.

There is a similar discussion to this but offers a solution using on:submit event that triggers even if the form has validation errors on client side. Not what I need, because I want to react to the server action response.

Thanks!

[huntabyte]

Use the options provided by superforms, more specifically the onResult option!

[svex99]

Thank you!

For anyone coming here, this is how it looks:

<Form.Root
    schema={...}
    {form}
    let:config
    options={{
        onResult: ({ result }) => {
            console.log("submitted");
        },
    }}
    method="post"
    action="..."
>

Check Formsnap docs for options.

[cowboycodr]

Now that the Form component has been updated, and their is no Form.Root where do you write the onResult function?

[cowboycodr]

Nvm. Spoke too soon. You just define it in the superForm function.

const form = superForm(data, options: { ..., onResult: (result) => {} }