[Bug]: Can't Use Action on the form with OnSubmit in the same time for validation

[AmrViernes]

Describe the bug

Am using the form as the documentation but when i remove the On submit i loss the validation functionality and the server action works great when using action alone the validation not popping and when i tried to put the action inside the on Submit didn't work either

Form Snippet

Action Snippet

Affected component/components

Form

How to reproduce

Just check the images

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Firefox

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[ahkhanjani]

@AmrViernes Does this help? https://www.youtube.com/watch?v=VLk45JBe8L8

[AmrViernes]

@AmrViernes Does this help? https://www.youtube.com/watch?v=VLk45JBe8L8

Thanks man yes this seems the same problem exactly I'm gonna try his solution and keep you updated

[Andrii-Antoniuk]

@ahkhanjani thanks for providing link too! 🥳

[jack-szeto]

@AmrViernes Does this help? https://www.youtube.com/watch?v=VLk45JBe8L8

This works but it won't be able to use the useFormStatus.

The problem is it doesn't trigger the action with the <form>.

<form
  ref={formRef}
  // action={formAction} // this is actually no needed, it won't call anyway
  onSubmit={(evt) => {
    evt.preventDefault();
    form.handleSubmit(() => {
      console.log(`[SurveyForm] formAction: `, formAction);

      formAction(new FormData(formRef.current!));
    })(evt);
  }}
>

As a result, when you use useFormStatus it won't be able to receive the action.

export const SubmitButton: React.FC<{
  label?: string;
}> = ({ label = 'Save' }) => {
  // THIS DOES NOT WORK
  const { pending, action } = useFormStatus();
  return (
    <>
      <Button type="submit" variant="contained" disabled={pending}>
        <div className="flex items-center gap-2">
          {pending && <CircularProgress color="inherit" size={'1em'} />}
          {label && <span>{label}</span>}
        </div>
      </Button>
    </>
  );
};

Would love to know any workaround. Really want to keep the client side validation with useForm hook.