Ajv

Form validator implementation based on Ajv@8 JSON schema validator.

Note

Currently this validator supports in place schema mutations but in the next major version it will check only for reference equality by default.

Installation

npm

npm i @sjsf/ajv8-validator ajv@8

yarn

yarn add @sjsf/ajv8-validator ajv@8

pnpm

pnpm add @sjsf/ajv8-validator ajv@8

bun

bun add @sjsf/ajv8-validator ajv@8

Example

form.svelte

<script lang="ts">
  import { SimpleForm, ON_INPUT } from "@sjsf/form";
  import { createValidator2 } from "@sjsf/ajv8-validator";

  import { useCustomForm } from "@/components/custom-form";

  import { schema, uiSchema } from './_shared';

  const validator = createValidator2();

  const form = useCustomForm({
    schema,
    uiSchema,
    validator,
    fieldsValidationMode: ON_INPUT,
    initialValue: {
      id: "Invalid",
      skills: ["karate", "budo", "aikido"],
      multipleChoicesList: ["foo", "bar", "fuzz"],
    }
  });
</script>

<SimpleForm
  {form}
  novalidate
  style="display: flex; flex-direction: column; gap: 1rem;"
/>

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

_shared.ts

import type { Schema, UiSchema } from "@sjsf/form";

export const schema: Schema = {
  type: "object",
  properties: {
    id: {
      type: "string",
      minLength: 8,
      pattern: "\\d+",
    },
    active: {
      type: "boolean",
    },
    skills: {
      type: "array",
      minItems: 4,
      items: {
        type: "string",
        minLength: 5,
      },
    },
    multipleChoicesList: {
      type: "array",
      maxItems: 2,
      items: {
        type: "string",
        enum: ["foo", "bar", "fuzz"],
      },
    },
  },
};

export const uiSchema: UiSchema = {
  id: {
    "ui:options": {
      title: "Identifier",
    },
  },
  active: {
    "ui:options": {
      title: "Active",
    },
  },
  multipleChoicesList: {
    "ui:options": {
      title: "Pick max two items",
    },
  },
};

export const initialValue = {
  id: "Invalid",
  skills: ["karate", "budo", "aikido"],
  multipleChoicesList: ["foo", "bar", "fuzz"],
};

Async validation

This validator supports async validation.

Asynchronous validation

import { createAsyncValidator } from "@sjsf/ajv8-validator";

const validator = createAsyncValidator({
  ajv: yourAjvInstance,
})