Yup

Yup is a JavaScript schema builder for value parsing and validation. It is a library that allows you to define a schema for your data and validate it.

Installation

pnpm

pnpm add @faivform/yup yup

npm

npm install @faivform/yup yup

Usage

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

TS

<script>
  import { faivform, Field } from "@tuentyfaiv/svelte-form";
  import { adapter } from "@faivform/yup";
  import * as yup from "yup";

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

  type Schema = typeof schema;
  type Fields = yup.InferType<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/yup";
  import * as yup from "yup";

  const schema = yup.object().shape({
    name: yup.string().required(),
    age: yup.number().required(),
    email: yup.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/yup";
  import { object, string, number } from "yup";

  import type { InferType } from "yup";

  const schema = object({
    name: string().required("Name is required"),
    age: number()
      .required("Age is required")
      .positive("Age must be positive")
      .integer("Age must be an integer"),
    email: string().email().required("Email is required"),
  });

  type Schema = typeof schema;
  type Fields = InferType<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>