htmx , zod検証

概要:

htmx + zod使う例になります。

• bundler は、Viteを使用する例です。

[ 作成日: 2024/08/25 ]

---

構成

• htmx
• Vite:5.2
• typescript: 5.4
• express
• tailwindcss

---

作成したコード

• https://github.com/kuc-arc-f/express_48htmx/tree/main/example/zod

---

• hx-post: POST送信します。
• example/zod/src/pages/Zod.ts

      <form
      hx-post="/api/zod/test"
      hx-trigger="submit"
      hx-target="#resulte_form1"
      hx-on--before-request=""
      hx-on--after-request="Zod.afterPostForm1()"
      >
        <label>title</label>
        <input type="text" name="title"
        class="mx-2 border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500" 
        /><br />
        <hr class="my-2" />
        <label>content</label>
        <input type="text" name="content"
        class="mx-2 border border-gray-400 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"
        />   
        <hr class="my-2" />
        <button type="submit"
        class="ms-2 bg-transparent hover:bg-purple-500 text-purple-700 font-semibold hover:text-white py-2 px-4 border border-purple-500 hover:border-transparent rounded"
        >Add</button>
      </form>
      <hr />
      <div id="resulte_form1" class="d-none">ここに表示</div>

• https://github.com/kuc-arc-f/express_48htmx/blob/main/example/zod/src/pages/Zod.ts

---

• example/zod/src/routes/zod.ts
• API: zod検証、レスポンス返却します。

router.post("/test", async function(req: any, res: any) {
  const retObj ={success: false, data:{}, errors: {}}
  try {
console.log(req.body);
    if(req.body){
      FormData.parse(req.body);
    }
    retObj.success = true;
    retObj.data = req.body;
    res.json(retObj);
  } catch (error) {
    console.error(error);
    retObj.errors = error.flatten().fieldErrors;
    res.json(retObj);
//    res.sendStatus(500);
  }
});

https://github.com/kuc-arc-f/express_48htmx/blob/main/example/zod/src/routes/zod.ts

---