like-gold

Setting errors from Form Submission.

I have a form that sends an API request to an external service, which sometimes has validations that can't be matched in the frontend so when submitting I need to be able to set certain fields as errors, I read through the docs but couldn't find any way to do it. Any help is appreciated.

10 Replies

flat-fuchsia•5w ago

since it can produce validation errors and it's supposed to be sent on submit, you can put it in the validators.onSubmitAsync validator. it only runs on submission, so if the request succeeds, it will be considered a successful submission. If you encountered errors, return them to be considered an invalid submission

like-goldOP•5w ago

So basically, just avoid using the actual onSubmit handler and manage the submission in the validator?

flat-fuchsia•5w ago

onSubmit is the handler for successful submissions. It depends on what the validator error actually is if you have a database error and the query randomly fails, or if you have a transient error, it's not the user's fault. You shouldn't block their submission attempts because of that those would belong in onSubmit. If you actually have relevant information to share with the user though (e.g. "Username taken"), then yes the validator will be the place to do it we're reworking how validation is handled, so once that's out we'll also look into a way to create errors from onSubmit. You're not alone in thinking that it's odd to have it managed that way, though you're far more polite than some of the other comments

like-goldOP•5w ago

Yes I actually thought about doing the submission in the async validator, but wasn't sure if there was a better way. Thank you very much for the answer, and it really sucks that people can't be polite when asking something of other people, especially with an open source project. Hope you have a great day!

flat-fuchsia•5w ago

Actually, while we're on the topic. We've had discussions about an API proposal for it before. Do you have complaints about this suggestion?

onSubmit: async ({ value, formApi, createError }) => {
    // Suggestion: 'branded' errors, unbranded values are not treated as errors   
    try {
     await saveInDatabase(value);
     return 'Something not considered an error. Promise, string, whatever. Gets tossed internally';
   } catch (e: any) {
     // Actually received and mapped. Supports mapping to fields.
     return createError('Backend problem. Try again later')
   }

  // shorthand
  await saveInDatabase(value).catch(() => createError('Backend problem. Try again later'))
}

onSubmit: async ({ value, formApi, createError }) => {
    // Suggestion: 'branded' errors, unbranded values are not treated as errors   
    try {
     await saveInDatabase(value);
     return 'Something not considered an error. Promise, string, whatever. Gets tossed internally';
   } catch (e: any) {
     // Actually received and mapped. Supports mapping to fields.
     return createError('Backend problem. Try again later')
   }

  // shorthand
  await saveInDatabase(value).catch(() => createError('Backend problem. Try again later'))
}

like-goldOP•5w ago

1. Why only consider special returns as errors? Is this something that people requested or what's the reasoning behind it? Anyway I think it is good, since it makes it clear that what you are returning is going to be registered as an error. 2. Maybe on the actual createError arguments only allow an object with the form and corresponding fields keys to set their errors. Mantaining the same structure as the currently return errors from the validators.

onSubmit: async ({ value, formApi, createError }) => {
    // Suggestion: 'branded' errors, unbranded values are not treated as errors   
    try {
     await saveInDatabase(value);
     return 'Something not considered an error. Promise, string, whatever. Gets tossed internally';
   } catch (e: any) {

     // Assuming that you could pass something like this to set error for different fields.
     return createError({
              form: "..."
               fields: {
                    ....
                }
            })
   }

  // shorthand
  await saveInDatabase(value).catch(() => createError('Backend problem. Try again later'))
}

onSubmit: async ({ value, formApi, createError }) => {
    // Suggestion: 'branded' errors, unbranded values are not treated as errors   
    try {
     await saveInDatabase(value);
     return 'Something not considered an error. Promise, string, whatever. Gets tossed internally';
   } catch (e: any) {

     // Assuming that you could pass something like this to set error for different fields.
     return createError({
              form: "..."
               fields: {
                    ....
                }
            })
   }

  // shorthand
  await saveInDatabase(value).catch(() => createError('Backend problem. Try again later'))
}

But it looks good, it would solve this problem and is easy to understand

flat-fuchsia•5w ago

1. is because of a few reasons: * If it suddenly was considered an error, we'd have multiple breaking changes along with it. We're trying not to push a v2 too soon for something like this. * It allows for syntax like onSubmit: ({ value }) => updateMutation.mutateAsync(value) which is a convenient one-liner for users that use query libraries. The return value from those would suddenly be an error * We'll have some more documentation on the following point, but there's a difference forms should have between errors and user errors. A transient error would show up in updateMutation.isError, but shouldn't prevent the user from submitting again (which is what a validation error would do). 2. That form is optional to begin with, but yes, we'll allow that structure as well when it's implemented.

like-goldOP•5w ago

Then I will be looking forward to when it is implemented Let me know if you need any more feedback about it

flat-fuchsia•5w ago

well, a different validation-related feature takes priority for now, but I'll keep it in mind in case it comes up again!

like-goldOP•5w ago

Yes of course, no problem. My problem is solved handling the submission on the validator, so no rush.

Gaming

Programming

Setting errors from Form Submission.

Did you find this page helpful?