documentation icon indicating copy to clipboard operation
documentation copied to clipboard

docs: Add SubmitErrorHandler to typescript example so it matches the javascript example

Open faysvas opened this issue 7 months ago • 2 comments

When browsing the docs I noticed that the TS and JS Sync examples in the docs for handleSubmit were mismatched.

Specifically, even though an onError handler is defined in the TS example, it isn't passed to handleSubmit.

handleSubmit(1) handleSubmit(2)

Another idea might be to update both the javascript and typescript examples to include some validation rules, like this one

import React from "react"
import { useForm, SubmitHandler, SubmitErrorHandler } from "react-hook-form"

type FormValues = {
  firstName: string
  lastName: string
  email: string
}

export default function App() {
  const { register, handleSubmit } = useForm<FormValues>()
  const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data)
  const onError: SubmitErrorHandler<FormValues> = (errors) => console.log(errors);

  return (
    <form onSubmit={handleSubmit(onSubmit, onError)}>
      <input {...register("firstName"), { required: true }} />
      <input {...register("lastName"), { minLength: 2 }} />
      <input type="email" {...register("email")} />

      <input type="submit" />
    </form>
  )
}

from the TS section

faysvas avatar Apr 30 '25 11:04 faysvas

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-hook-form-website ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 24, 2025 11:14pm

vercel[bot] avatar Apr 30 '25 11:04 vercel[bot]

Deploy Preview for sage-cassata-31d224 ready!

Name Link
Latest commit 1d0dd2ec97b6acb0d179d71aa5548718e0a96d38
Latest deploy log https://app.netlify.com/projects/sage-cassata-31d224/deploys/6882be087f2d260008f2d609
Deploy Preview https://deploy-preview-1140--sage-cassata-31d224.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify[bot] avatar Apr 30 '25 11:04 netlify[bot]

sorry for the late review, looks like it's already been updated. 🙏

bluebill1049 avatar Jul 24 '25 23:07 bluebill1049