#How do I redirect a user after successfully submitting a form?

7 messages · Page 1 of 1 (latest)

true roost
#

I'm currently using the set up exactly as outlined in the Next.js integration docs, and using redirect from next/navigation inside the Server Action. However, when submitting, I see some odd behavior where the validations run once more after my server action, and then I see some errors briefly on the form before it finally redirects.

Is there a canonical way to redirect? (I searched the docs and the Discord for "redirect" and found nothing)

true roost
#

Commenting out the validators here solves the issue, kind of (it really doesn't because before redirecting the form can be quickly submitted again if the user has a slow connection, as isSubmitting is set to false and canSubmit is set to true).

Moreover, as described in [this thread](#1407189174712401982 message), things don't work.

  const form = useForm({
    ...usernameFormOptions, // Just default value for `username`
    transform: useTransform(
      (baseForm) => mergeForm(baseForm, actionState!),
      [actionState]
    ),
    // validators: {
    //   onBlur: usernameFormSchema,
    // },
    onSubmit: () => {
      console.log('UsernameForm onSubmit')
    }
  });
true roost
#

are validators run again after the form action is called?

spark nova
true roost
#

yeah, from onChangeAsync which runs a next-safe-action - this is what my field looks like

<form.Field
  name="username"
  asyncDebounceMs={500}
  validators={{
    onChangeAsync: async ({ value }) => {
      const { data, serverError, validationErrors } = await checkUsernameAvailable({
        username: value,
      });
      console.log('onChangeAsync result', {data, serverError, validationErrors});
      if (!data) {
        log.error('No data when checking username availability.');
        return { message: 'Something went wrong. Refresh?' };
      }
      if (data.message) {
        toast.error(data.message);
        return { message: data.message };
      }
      if (!data.isAvailable) {
        return { message: 'That username is already taken' };
      }
    },
  }}
  children={/* ... */}
/>
#

and I see "That username is already taken" after submitting (and that username was created by the form submit run right before it)

spark nova