Zod

Zod is a TypeScript-first schema declaration and validation library. It is a library that allows you to define a schema for your data and validate it.

Installation

pnpm

pnpm add @faivform/zod zod

npm

npm install @faivform/zod zod

Usage

You need to create a schema using Zod and then pass it through the adapter to the faivform function.

TS

<script lang="ts">
  import { faivform, Field } from "@tuentyfaiv/svelte-form";
  import { adapter } from "@faivform/zod";
  import { z } from "zod";

  const schema = z.object({
    name: z.string(),
    age: z.number(),
    email: z.string().email(),
  });

  type Schema = typeof schema;
  type Fields = z.infer<Schema>;

  const form = faivform<Schema, Fields>({ fields: adapter(schema) });

  // ... rest of the code
</script>

JS

<script>
  import { faivform, Field } from "@tuentyfaiv/svelte-form";
  import { adapter } from "@faivform/zod";
  import { z } from "zod";

  const schema = z.object({
    name: z.string(),
    age: z.number(),
    email: z.string().email(),
  });

  const form = faivform({ fields: adapter(schema) });

  // ... rest of the code
</script>

Example

Component

Name: Age: Email: Submit

Code

<script lang="ts">
  import { Errors, faivform, Field } from "@tuentyfaiv/svelte-form";
  import { adapter } from "@faivform/zod";
  import { z } from "zod";

  const schema = z.object({
    name: z.string(),
    age: z.number(),
    email: z.string().email(),
  });

  type Schema = typeof schema;
  type Fields = z.infer<Schema>;

  const form = faivform<Schema, Fields>({
    fields: adapter(schema)
  });

  const onSubmit = $form.submit((values) => {
    console.log(values);
  });
</script>

<form on:submit|preventDefault={onSubmit}>
  <Field name="name" label="Name:" />
  <Field name="age" label="Age:" type="number" />
  <Field name="email" label="Email:" type="email" />
  <Errors />
  <button type="submit"> Submit </button>
</form>