Is it possible to have a custom form action?

[acollazomayer]

Hi all. I am having troubles creating a fomr that posts to a specific route.

I have this form:

export const InviteForm = () => {
  const inviteUser = useFetcher<typeof action>();

  const inviteUserSubmission = useMemo(() => {
    return inviteUser.data?.submission
  }, [inviteUser.data?.submission])

  const [form, fields] = useForm({
		id: 'new-invitation-form',
		constraint: getFieldsetConstraint(UserInviteSchema),
    lastSubmission: inviteUserSubmission,
		onValidate({ formData }) {
			return parse(formData, { schema: UserInviteSchema })
		},
		shouldRevalidate: 'onBlur',
		defaultValue,
	});
  
  return (
    <inviteUser.Form
      method="post"
      action="new"
      {...form.props}
    >
      <AuthenticityTokenInput />
      <div className="flex space-x-2">
        <Field
          className="w-full"
          inputProps={{
            placeholder: "email@example.com",
            ...conform.input(fields.email, { ariaAttributes: true }),
          }}
          errors={fields.email.errors}
        />
        <StatusButton
          variant="secondary"
          className="shrink-0"
          status={
            inviteUser.state === 'submitting'
              ? 'pending'
              : inviteUser.data?.status ?? 'idle'
          }
          type="submit"
          disabled={inviteUser.state !== 'idle'}
        >
          Invite
        </StatusButton>
      </div>
    </inviteUser.Form>
  )
}

When I add the form props form conform the submission to the specific action stops and the form is never submitted. Is there a way to enable the submission?

Thanks!

[halljus]

Maybe it's not passing client-side validation? What's UserInviteSchema look like?

As a debugging step, try changing onValidate to this:

onValidate({ formData }) {
  const submission = parse(formData, { schema: UserInviteSchema });
  console.log(submission);
  return submission;
},

Then watch your console when you try to submit.

[acollazomayer]

The UserInviteSchema is a simple zod schema with the email as required and email validatiion. The onValidate function seems to be working properly. I was able to hack by overriding the onSubmit and manually submitting the fetcher. But I honestly think that this is an issue with the library. When the action was not there, everything was working perfectly.

[edmundhung]

Conform do nothing with related to form action. As it seems like you are using the Epicstack, can you check if the other forms working as well? I believe there should be a few pages using fetcher already. Otherwise, it would be great if you can share a sandbox or repo that can reproduce the problem and I can look into it. Thank you.