Svelte form検証で。zod 使う例

import { z } from 'zod';
//
const FormData = z.object({
    title: z
    .string()
    .min(2, { message: '2文字以上入力してください。' }),
    content: z
    .string()
    .min(2, { message: '2文字以上入力してください。' }),
});
//
const Validate = {
  /**
   * 
   * @param
   *
   * @return
   */
  formValidate: function(input){
    let errors = {};
    try {
      FormData.parse(input);
      return errors;
    } catch (e) {
      console.error(e.flatten().fieldErrors);
      return e.flatten().fieldErrors;
    }
  },
}
export default Validate;

<script lang="ts">
import type { ComponentEvents } from 'svelte';
import type { SvelteHTMLElements  } from 'svelte/elements';
type InputOnChangeEvent = SvelteHTMLElements['input']['on:change']

import HttpCommon from './lib/HttpCommon';
import CrudIndex from './Zod/CrudIndex';
import Crud from './Zod/Crud';
import Validate from './Zod/Validate';

export let errors = {};
//
const testProc = async function(){
  const input = Crud.getInputValues();
  errors = Validate.formValidate(input);
console.log(errors);
  if (Object.keys(errors).length > 0) {
    alert("Error!");
  }
}
</script>

<!-- -->
<div class="container mx-auto my-2 px-8 bg-white">
  <hr class="my-2" />
  <h1 class="text-4xl font-bold">Zod test!!</h1>
  <hr class="my-2" />
  <label>Title:
    <input type="text" id="title" 
    class="border border-gray-400 rounded-md px-3 py-2 w-full focus:outline-none focus:border-blue-500"
    />    
  </label>
  {#if errors?.title}
    <em class="error_message">{errors?.title}</em>
  {/if}
  <hr class="my-2" />
  <label>Content:
    <input type="text" id="content" 
    class="border border-gray-400 rounded-md px-3 py-2 w-full focus:outline-none focus:border-blue-500"
    />    
  </label>
  {#if errors?.content}
    <em class="error_message">{errors?.content}</em>
  {/if}
  <hr class="my-2" />
  <button on:click={() => testProc()} class="btn-purple">Test
  </button>
</div>

<style>
</style>

<!--
-->