svelte-formor

Form validation for Svelte in composition functions with Zod.

Installation

Install svelte-formor with your favorite package manager:

$ npm i svelte-formor
# or
$ yarn add svelte-formor
# or
$ pnpm i svelte-formor
# or
$ bun add svelte-formor

Usage

To use svelte-formor, import the useSchema function:

// esm
import { useSchema } from 'svelte-formor';

// cjs
const { useSchema } = require('svelte-formor');

<script lang="ts">
  import { writable } from 'svelte/store';
  import { useSchema } from 'svelte-formor';
  import { z } from 'zod';

  const form = writable<{ name?: string; email?: string }>({});
  const valdn = writable<Record<string, string>>({});

  const msgs = { required: 'This is a required field' };

  const schema = useSchema(
    z.object({
      name: z.string({ required_error: msgs.required }).nonempty(msgs.required),
      email: z.string({ required_error: msgs.required }).nonempty(msgs.required),
    }),
    form,
    valdn,
  );

  const submit = () => {
    if (schema.validate()) {
      console.log('passed', $form);
    }
  };
</script>

<div class="max-w-100 p-6 shadow-md">
  <div class="flex flex-col gap-3">
    <TextField label="Name" bind:value={$form.name} errorMessage={$valdn.name} />
    <TextField label="Email" bind:value={$form.email} errorMessage={$valdn.email} />
  </div>

  <Button class="mt-6" on:click={submit}>Submit</Button>
</div>

<pre>{JSON.stringify($form, null, 2)}</pre>
<pre>{JSON.stringify($valdn, null, 2)}</pre>