From 847f8f07a0c53266439093770e2a2344d4d9c8ff Mon Sep 17 00:00:00 2001
From: aken-you <kinsk2839@naver.com>
Date: Sat, 18 Jan 2025 20:57:43 +0900
Subject: [PATCH 1/4] add SubmitErrorHandler type to handleSubmit example

---
 src/content/docs/useform/handlesubmit.mdx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/content/docs/useform/handlesubmit.mdx b/src/content/docs/useform/handlesubmit.mdx
index ae429c1d8..db5312b66 100644
--- a/src/content/docs/useform/handlesubmit.mdx
+++ b/src/content/docs/useform/handlesubmit.mdx
@@ -56,7 +56,7 @@ This function will receive the form data if form validation is successful.
 
 ```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-handlesubmit-ts-v7-lcrtu"
 import React from "react"
-import { useForm, SubmitHandler } from "react-hook-form"
+import { useForm, SubmitHandler, SubmitErrorHandler } from "react-hook-form"
 
 type FormValues = {
   firstName: string
@@ -67,6 +67,7 @@ type FormValues = {
 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)}>

From f719acef4f48be3a6e3bc45f4863ded701726a00 Mon Sep 17 00:00:00 2001
From: aken-you <kinsk2839@naver.com>
Date: Sat, 18 Jan 2025 20:58:06 +0900
Subject: [PATCH 2/4] add SubmitErrorHandler example

---
 src/content/ts.mdx | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/content/ts.mdx b/src/content/ts.mdx
index 5fcc45981..5c71f0dc4 100644
--- a/src/content/ts.mdx
+++ b/src/content/ts.mdx
@@ -84,6 +84,37 @@ export default function App() {
 
 ---
 
+## \</> SubmitErrorHandler {#SubmitErrorHandler}
+
+```typescript copy
+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")} />
+      <input {...register("lastName")} />
+      <input type="email" {...register("email")} />
+
+      <input type="submit" />
+    </form>
+  )
+}
+```
+
+---
+
 ## \</> Control {#Control}
 
 ```typescript copy sandbox="https://codesandbox.io/s/control-2mg07"

From 0c7d07e6db532d2d596801f97001222795727b63 Mon Sep 17 00:00:00 2001
From: aken-you <kinsk2839@naver.com>
Date: Sat, 18 Jan 2025 20:59:27 +0900
Subject: [PATCH 3/4] remove unused formState variable in handleSubmit example

---
 src/content/docs/useform/handlesubmit.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/docs/useform/handlesubmit.mdx b/src/content/docs/useform/handlesubmit.mdx
index db5312b66..93128ffe6 100644
--- a/src/content/docs/useform/handlesubmit.mdx
+++ b/src/content/docs/useform/handlesubmit.mdx
@@ -110,7 +110,7 @@ import { useForm } from "react-hook-form";
 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 
 function App() {
-  const { register, handleSubmit, formState: { errors }, formState } = useForm();
+  const { register, handleSubmit, formState: { errors } } = useForm();
   const onSubmit = async data => {
     await sleep(2000);
     if (data.username === "bill") {

From 7a89e1239778e61f0cc022247aab896c9ca4e4db Mon Sep 17 00:00:00 2001
From: aken-you <kinsk2839@naver.com>
Date: Tue, 21 Jan 2025 14:07:57 +0900
Subject: [PATCH 4/4] set error in field

---
 src/content/ts.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/ts.mdx b/src/content/ts.mdx
index 5c71f0dc4..7b0e305be 100644
--- a/src/content/ts.mdx
+++ b/src/content/ts.mdx
@@ -103,8 +103,8 @@ export default function App() {
 
   return (
     <form onSubmit={handleSubmit(onSubmit, onError)}>
-      <input {...register("firstName")} />
-      <input {...register("lastName")} />
+      <input {...register("firstName"), { required: true }} />
+      <input {...register("lastName"), { minLength: 2 }} />
       <input type="email" {...register("email")} />
 
       <input type="submit" />