fair-rose

Setting a Form wide error

How can I set a form wide error? e.g. not related to a particular field.

5 Replies

optimistic-gold•6mo ago

We used the onSubmitAsync from the validators to handle both the submit and the form wide error in case the api throws. If someone else has a better idea, I'm open to that:

  const form = useAppForm({
    validators: {
      onSubmitAsync: async ({ value, formApi }) => {
        try {
          const data = await onSubmit(value);
          formApi.reset(data);
        } catch (e) {
          toastError(e);
          return {
            form: parseError(e),
          };
        }
      },
    },
    ...
  });

  const form = useAppForm({
    validators: {
      onSubmitAsync: async ({ value, formApi }) => {
        try {
          const data = await onSubmit(value);
          formApi.reset(data);
        } catch (e) {
          toastError(e);
          return {
            form: parseError(e),
          };
        }
      },
    },
    ...
  });

like-gold•6mo ago

Any validation on onChange or others on useForm will be on a form in particular, unless you're using Zod/Valibot/Standard Schema

extended-salmon•6mo ago

is it possible to mix both custom validation and zod validation? for example after client side validation with Zod, id like to return the errors from the API at a form level rathet than field level. So e.g. in a login form, display "invalid credentials" after submission

frail-apricot•6mo ago

If you pass the zod schema to onChange and your custom api functio on onChangeAsync you get exactly that, async is fired only if sync passes with no errors

extended-salmon•6mo ago

and if I wanted to do onSubmit? For example once client side is validated call a handleLogin server action would I need to put it on onSubmitAsync? I tried putting it on onSubmitAsync but the types mess up as it expects a standardschema.

Gaming

Programming

Setting a Form wide error

Did you find this page helpful?