From 2c4ded4630420707d5a0c93629c5a1f3566effce Mon Sep 17 00:00:00 2001
From: Kirill Barsukov <kirillsbarsukov@gmail.com>
Date: Tue, 1 Oct 2024 13:36:48 -0400
Subject: [PATCH] docs: improve list intents button example (#761)

---
 docs/intent-button.md    | 16 ++++++++++++++--
 docs/ja/intent-button.md | 16 ++++++++++++++--
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/docs/intent-button.md b/docs/intent-button.md
index 417ea316..f5ad7091 100644
--- a/docs/intent-button.md
+++ b/docs/intent-button.md
@@ -136,13 +136,25 @@ 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 (
-    <form id={form.id}>
+    <form id={form.id} onSubmit={form.onSubmit}>
       <ul>
         {tasks.map((task, index) => (
           <li key={task.key}>
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}>