Add a way to handle/set submission errors (from backend server)

[TylerRick]

Is your feature request related to a problem? Please describe.

Some things can be / are only validated when we submit the completed form to the server. The server may respond with some validation errors of its own. We need a way to handle these errors so that the error message can be shown next to the field it applies to (if it's a field-level error) in exactly the same way as the client-side errors are displayed.

Describe the solution you'd like

I'd like to be able to return an object containing errors (that are returned from a failed submission) from my onSubmit function and have them automatically added to a submitErrors collection. This is how it works in react-final-form (which is the awesome library I'm migrating from as I migrate to Svelte), as in this demo.

Here are some of the ways that final-form helps support submission errors (which we could consider adding to this library):

• In the FormState object, in addition to regular (client-side) validation errors exposed as errors, it provides a submitErrors and submitError
• Provides submitFailed which is true if the form was submitted, but the submission failed with submission errors. false otherwise.
• Provides hasSubmitErrors: true when the form currently has submit errors. Useful for distinguishing why invalid is true.
• invalid takes into account both errors and submitErrors:

  true if any of the fields or the form has a validation or submission error. false otherwise. Note that a form can be invalid even if the errors do not belong to any currently registered fields.

Describe alternatives you've considered

I've considered using the validate function to submit the form values to the server ... but that doesn't really work, because if the form values are valid then it won't just validate the form submission; it will also process it, which doesn't make sense to perform in the context of a validate function...

I've considered creating my own submitErrors store. And that's probably what I'll have to do as a workaround for now. Here's a sandbox showing a demo of this approach. But it's not at all integrated with the form library. So I was just hoping that we could someday get first-class support for submission errors from this library like I have enjoyed having with final-form.

[davidjbeaver]

I had a similar issue but for me I simply accessed the errors store that is exposed from the createForm function.

In my case I am checking if an email and other fields are valid. The server returns an object with boolean values indicating which fields failed validation.

In your API response, simply have something similar to:

if (data.emailExists) $errors["email"] = "An account with that email already exists"

Assuming that you have a field in your schema called "email".

This also triggers the other validation such as isValid so you can prevent submission until they have changed the values.

Hope that helps!