From fd6e5b003ade0b365a7f351a3b1584cb0554a714 Mon Sep 17 00:00:00 2001
From: Kirill Barsukov <kirillsbarsukov@gmail.com>
Date: Thu, 12 Sep 2024 15:21:54 -0400
Subject: [PATCH 1/9] Updated a code-snippet of insert, remove, and reorder.

---
 docs/intent-button.md | 53 +++++++++++++++++++++++--------------------
 1 file changed, 29 insertions(+), 24 deletions(-)

diff --git a/docs/intent-button.md b/docs/intent-button.md
index 417ea316..85aadaa3 100644
--- a/docs/intent-button.md
+++ b/docs/intent-button.md
@@ -135,37 +135,42 @@ Be aware that both intents requires setting up the inputs with the **key** from
 To manipulate a field list, you can use the **insert**, **remove** and **reorder** intents.
 
 ```tsx
-import { useForm } from '@conform-to/react';
+import { useForm, getFormProps, getInputProps } from '@conform-to/react';
 
 export default function Tasks() {
   const [form, fields] = useForm();
   const tasks = fields.tasks.getFieldList();
 
   return (
-    <form id={form.id}>
+    <form {...getFormProps(form)}>
       <ul>
-        {tasks.map((task, index) => (
-          <li key={task.key}>
-            <input name={task.name} />
-            <button
-              {...form.reorder.getButtonProps({
-                name: fields.tasks.name,
-                from: index,
-                to: 0,
-              })}
-            >
-              Move to top
-            </button>
-            <button
-              {...form.remove.getButtonProps({
-                name: fields.tasks.name,
-                index,
-              })}
-            >
-              Delete
-            </button>
-          </li>
-        ))}
+        {tasks.map((task, index) => {
+          const taskFields = task.getFieldset();
+          return (
+            <li key={task.key}>
+              <fieldset key={task.key} {...getFieldsetProps(task)}>
+                <input {...getInputProps(taskFields.content, { type: "text" })} />
+                <button
+                  {...form.reorder.getButtonProps({
+                    name: fields.tasks.name,
+                    from: index,
+                    to: 0,
+                  })}
+                >
+                  Move to top
+                </button>
+                <button
+                  {...form.remove.getButtonProps({
+                    name: fields.tasks.name,
+                    index,
+                  })}
+                >
+                  Delete
+                </button>
+              </fieldset>
+            </li>			
+          )
+        })}
       </ul>
       <button
         {...form.insert.getButtonProps({

From dffb304e961cdfcd877593245e3ae6612be03d3f Mon Sep 17 00:00:00 2001
From: Kirill Barsukov <kirillsbarsukov@gmail.com>
Date: Thu, 12 Sep 2024 15:23:28 -0400
Subject: [PATCH 2/9] Updated a code-snippet of insert, remove, and reorder.

---
 docs/intent-button.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/intent-button.md b/docs/intent-button.md
index 85aadaa3..2f797d3f 100644
--- a/docs/intent-button.md
+++ b/docs/intent-button.md
@@ -148,7 +148,7 @@ export default function Tasks() {
           const taskFields = task.getFieldset();
           return (
             <li key={task.key}>
-              <fieldset key={task.key} {...getFieldsetProps(task)}>
+              <fieldset {...getFieldsetProps(task)}>
                 <input {...getInputProps(taskFields.content, { type: "text" })} />
                 <button
                   {...form.reorder.getButtonProps({

From 615dfb2e702345c8f9b1915b2bb5c384d59f6874 Mon Sep 17 00:00:00 2001
From: Kirill Barsukov <kirillsbarsukov@gmail.com>
Date: Sat, 28 Sep 2024 10:12:29 -0400
Subject: [PATCH 3/9] added onSubmit property

---
 docs/intent-button.md | 53 ++++++++++++++++++++-----------------------
 1 file changed, 24 insertions(+), 29 deletions(-)

diff --git a/docs/intent-button.md b/docs/intent-button.md
index 2f797d3f..5fb6bd08 100644
--- a/docs/intent-button.md
+++ b/docs/intent-button.md
@@ -135,42 +135,37 @@ Be aware that both intents requires setting up the inputs with the **key** from
 To manipulate a field list, you can use the **insert**, **remove** and **reorder** intents.
 
 ```tsx
-import { useForm, getFormProps, getInputProps } from '@conform-to/react';
+import { useForm } from '@conform-to/react';
 
 export default function Tasks() {
   const [form, fields] = useForm();
   const tasks = fields.tasks.getFieldList();
 
   return (
-    <form {...getFormProps(form)}>
+    <form id={form.id} onSubmit={form.onSubmit}>
       <ul>
-        {tasks.map((task, index) => {
-          const taskFields = task.getFieldset();
-          return (
-            <li key={task.key}>
-              <fieldset {...getFieldsetProps(task)}>
-                <input {...getInputProps(taskFields.content, { type: "text" })} />
-                <button
-                  {...form.reorder.getButtonProps({
-                    name: fields.tasks.name,
-                    from: index,
-                    to: 0,
-                  })}
-                >
-                  Move to top
-                </button>
-                <button
-                  {...form.remove.getButtonProps({
-                    name: fields.tasks.name,
-                    index,
-                  })}
-                >
-                  Delete
-                </button>
-              </fieldset>
-            </li>			
-          )
-        })}
+        {tasks.map((task, index) => (
+          <li key={task.key}>
+            <input name={task.name} />
+            <button
+              {...form.reorder.getButtonProps({
+                name: fields.tasks.name,
+                from: index,
+                to: 0,
+              })}
+            >
+              Move to top
+            </button>
+            <button
+              {...form.remove.getButtonProps({
+                name: fields.tasks.name,
+                index,
+              })}
+            >
+              Delete
+            </button>
+          </li>
+        ))}
       </ul>
       <button
         {...form.insert.getButtonProps({

From 1d47ca80f6819fa6569eb06b684914b0d88a4b9e Mon Sep 17 00:00:00 2001
From: Kirill Barsukov <kirillsbarsukov@gmail.com>
Date: Sat, 28 Sep 2024 10:31:38 -0400
Subject: [PATCH 4/9] added a basic schema

---
 docs/intent-button.md | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/docs/intent-button.md b/docs/intent-button.md
index 5fb6bd08..f5ad7091 100644
--- a/docs/intent-button.md
+++ b/docs/intent-button.md
@@ -136,9 +136,21 @@ To manipulate a field list, you can use the **insert**, **remove** and **reorder
 
 ```tsx
 import { useForm } from '@conform-to/react';
+import { parseWithZod } from "@conform-to/zod";
+import { z } from "zod";
+
+const todosSchema = z.object({
+  title: z.string(),
+  tasks: z.array(z.string()),
+});
 
 export default function Tasks() {
-  const [form, fields] = useForm();
+  const [form, fields] = useForm({
+    onValidate({ formData }) {
+      return parseWithZod(formData, { schema: todosSchema });
+    },
+    shouldValidate: "onBlur",
+  });
   const tasks = fields.tasks.getFieldList();
 
   return (

From 60cfc4069aaa6ff081d88453f595af47fa6bb70b Mon Sep 17 00:00:00 2001
From: Kirill Barsukov <kirillsbarsukov@gmail.com>
Date: Thu, 12 Sep 2024 15:21:54 -0400
Subject: [PATCH 5/9] Updated a code-snippet of insert, remove, and reorder.

---
 docs/intent-button.md | 53 +++++++++++++++++++++++--------------------
 1 file changed, 29 insertions(+), 24 deletions(-)

diff --git a/docs/intent-button.md b/docs/intent-button.md
index 417ea316..85aadaa3 100644
--- a/docs/intent-button.md
+++ b/docs/intent-button.md
@@ -135,37 +135,42 @@ Be aware that both intents requires setting up the inputs with the **key** from
 To manipulate a field list, you can use the **insert**, **remove** and **reorder** intents.
 
 ```tsx
-import { useForm } from '@conform-to/react';
+import { useForm, getFormProps, getInputProps } from '@conform-to/react';
 
 export default function Tasks() {
   const [form, fields] = useForm();
   const tasks = fields.tasks.getFieldList();
 
   return (
-    <form id={form.id}>
+    <form {...getFormProps(form)}>
       <ul>
-        {tasks.map((task, index) => (
-          <li key={task.key}>
-            <input name={task.name} />
-            <button
-              {...form.reorder.getButtonProps({
-                name: fields.tasks.name,
-                from: index,
-                to: 0,
-              })}
-            >
-              Move to top
-            </button>
-            <button
-              {...form.remove.getButtonProps({
-                name: fields.tasks.name,
-                index,
-              })}
-            >
-              Delete
-            </button>
-          </li>
-        ))}
+        {tasks.map((task, index) => {
+          const taskFields = task.getFieldset();
+          return (
+            <li key={task.key}>
+              <fieldset key={task.key} {...getFieldsetProps(task)}>
+                <input {...getInputProps(taskFields.content, { type: "text" })} />
+                <button
+                  {...form.reorder.getButtonProps({
+                    name: fields.tasks.name,
+                    from: index,
+                    to: 0,
+                  })}
+                >
+                  Move to top
+                </button>
+                <button
+                  {...form.remove.getButtonProps({
+                    name: fields.tasks.name,
+                    index,
+                  })}
+                >
+                  Delete
+                </button>
+              </fieldset>
+            </li>			
+          )
+        })}
       </ul>
       <button
         {...form.insert.getButtonProps({

From 53ff3fedc8b576de98637413570f61ef424b259b Mon Sep 17 00:00:00 2001
From: Kirill Barsukov <kirillsbarsukov@gmail.com>
Date: Thu, 12 Sep 2024 15:23:28 -0400
Subject: [PATCH 6/9] Updated a code-snippet of insert, remove, and reorder.

---
 docs/intent-button.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/intent-button.md b/docs/intent-button.md
index 85aadaa3..2f797d3f 100644
--- a/docs/intent-button.md
+++ b/docs/intent-button.md
@@ -148,7 +148,7 @@ export default function Tasks() {
           const taskFields = task.getFieldset();
           return (
             <li key={task.key}>
-              <fieldset key={task.key} {...getFieldsetProps(task)}>
+              <fieldset {...getFieldsetProps(task)}>
                 <input {...getInputProps(taskFields.content, { type: "text" })} />
                 <button
                   {...form.reorder.getButtonProps({

From af8b3977081fe2f4a345ae966296dcd8ba935e32 Mon Sep 17 00:00:00 2001
From: Kirill Barsukov <kirillsbarsukov@gmail.com>
Date: Sat, 28 Sep 2024 10:12:29 -0400
Subject: [PATCH 7/9] added onSubmit property

---
 docs/intent-button.md | 53 ++++++++++++++++++++-----------------------
 1 file changed, 24 insertions(+), 29 deletions(-)

diff --git a/docs/intent-button.md b/docs/intent-button.md
index 2f797d3f..5fb6bd08 100644
--- a/docs/intent-button.md
+++ b/docs/intent-button.md
@@ -135,42 +135,37 @@ Be aware that both intents requires setting up the inputs with the **key** from
 To manipulate a field list, you can use the **insert**, **remove** and **reorder** intents.
 
 ```tsx
-import { useForm, getFormProps, getInputProps } from '@conform-to/react';
+import { useForm } from '@conform-to/react';
 
 export default function Tasks() {
   const [form, fields] = useForm();
   const tasks = fields.tasks.getFieldList();
 
   return (
-    <form {...getFormProps(form)}>
+    <form id={form.id} onSubmit={form.onSubmit}>
       <ul>
-        {tasks.map((task, index) => {
-          const taskFields = task.getFieldset();
-          return (
-            <li key={task.key}>
-              <fieldset {...getFieldsetProps(task)}>
-                <input {...getInputProps(taskFields.content, { type: "text" })} />
-                <button
-                  {...form.reorder.getButtonProps({
-                    name: fields.tasks.name,
-                    from: index,
-                    to: 0,
-                  })}
-                >
-                  Move to top
-                </button>
-                <button
-                  {...form.remove.getButtonProps({
-                    name: fields.tasks.name,
-                    index,
-                  })}
-                >
-                  Delete
-                </button>
-              </fieldset>
-            </li>			
-          )
-        })}
+        {tasks.map((task, index) => (
+          <li key={task.key}>
+            <input name={task.name} />
+            <button
+              {...form.reorder.getButtonProps({
+                name: fields.tasks.name,
+                from: index,
+                to: 0,
+              })}
+            >
+              Move to top
+            </button>
+            <button
+              {...form.remove.getButtonProps({
+                name: fields.tasks.name,
+                index,
+              })}
+            >
+              Delete
+            </button>
+          </li>
+        ))}
       </ul>
       <button
         {...form.insert.getButtonProps({

From eb841ec67c1e4ae22c7c919a03a05724ba982183 Mon Sep 17 00:00:00 2001
From: Kirill Barsukov <kirillsbarsukov@gmail.com>
Date: Sat, 28 Sep 2024 10:31:38 -0400
Subject: [PATCH 8/9] added a basic schema

---
 docs/intent-button.md | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/docs/intent-button.md b/docs/intent-button.md
index 5fb6bd08..f5ad7091 100644
--- a/docs/intent-button.md
+++ b/docs/intent-button.md
@@ -136,9 +136,21 @@ To manipulate a field list, you can use the **insert**, **remove** and **reorder
 
 ```tsx
 import { useForm } from '@conform-to/react';
+import { parseWithZod } from "@conform-to/zod";
+import { z } from "zod";
+
+const todosSchema = z.object({
+  title: z.string(),
+  tasks: z.array(z.string()),
+});
 
 export default function Tasks() {
-  const [form, fields] = useForm();
+  const [form, fields] = useForm({
+    onValidate({ formData }) {
+      return parseWithZod(formData, { schema: todosSchema });
+    },
+    shouldValidate: "onBlur",
+  });
   const tasks = fields.tasks.getFieldList();
 
   return (

From c23e10583cd80acedfdedcf9ffceb67989be5547 Mon Sep 17 00:00:00 2001
From: Kirill Barsukov <kirillsbarsukov@gmail.com>
Date: Tue, 1 Oct 2024 12:11:53 -0400
Subject: [PATCH 9/9] updated JP docs

---
 docs/ja/intent-button.md | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/docs/ja/intent-button.md b/docs/ja/intent-button.md
index f0788b6c..dc0b1099 100644
--- a/docs/ja/intent-button.md
+++ b/docs/ja/intent-button.md
@@ -136,13 +136,25 @@ export default function Tasks() {
 
 ```tsx
 import { useForm } from '@conform-to/react';
+import { parseWithZod } from "@conform-to/zod";
+import { z } from "zod";
+
+const todosSchema = z.object({
+  title: z.string(),
+  tasks: z.array(z.string()),
+});
 
 export default function Tasks() {
-  const [form, fields] = useForm();
+  const [form, fields] = useForm({
+    onValidate({ formData }) {
+      return parseWithZod(formData, { schema: todosSchema });
+    },
+    shouldValidate: "onBlur",
+  });
   const tasks = fields.tasks.getFieldList();
 
   return (
-    <form id={form.id}>
+    <form id={form.id} onSubmit={form.onSubmit}>
       <ul>
         {tasks.map((task, index) => (
           <li key={task.key}>