you should use action props and onSubmit props together. action props provide the fallback support when javascript is disabled.

function onSubmit(e: FormEvent<HTMLFormElement>) {
  form.handleSubmit(async () => {
    await formAction(new FormData(e.currentTarget))
    form.reset()
  })()
}

<form
action={formAction}
onSubmit={onSubmit}
/>

the code wasn't working. i have updated the code

no you don't need to do this

function onSubmit(e: FormEvent<HTMLFormElement>) {
  e.preventDefault()
  form.handleSubmit(async () => {
    if (false) {
      await formAction(new FormData(e.currentTarget))
      form.reset()
    }
  })()
}

try adding preventDefault here

if javascript is availble, it should use onSubmit props, otherwise it will use action props

how about this?

function onSubmit(e: FormEvent<HTMLFormElement>) {
  const formData = new FormData(e.currentTarget)
  e.preventDefault()
  form.handleSubmit(async () => {
    if (false) {
      await formAction(formData)
      form.reset()
    }
  })()
}

oh I know why

pass e to it

what value?

you don't need to check if the form isValid or not inside handleSubmit

handleSubmit should handle it for you

also you don't need to check it in action props too

it doesn't work if javascript is not availble

np

useFormStatus doesn't work well with react-hook-form

because react-hook-form is calling preventDefault() which make useFormStatus doesn't work properly

action={formAction}
onSubmit={e => {
  form.trigger()
  if (form.formState.isValid) {
    e.currentTarget.requestSubmit()
  } else {
    e.preventDefault()
  }
}}

but there is a way to use it. try this if you want to use useFormStatus

you should do it on onSubmit props

yes

this should work with and without javascript

Why do you need to use useFormStatus while you can get ‘isSubmitting’ from react-hook-form ?