docs: improve list intents button example (#761)

edmundhung · Oct 1, 2024 · 2c4ded4 · 2c4ded4
1 parent 8efbf2c
commit 2c4ded4
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git 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
@@ -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}>