Standard Schema

You can use any validator that implements Standard Schema spec and can be converted to JSON Schema for the full form validation step.

Example

form.svelte

<script lang="ts">
  import {
    BasicForm,
    createForm,
    type Schema,
    type Validator,
  } from "@sjsf/form";
  import { createFormValueValidator } from "@sjsf/form/validators/standard-schema";
  import { type } from "arktype";

  import * as defaults from "@/components/form-defaults";

  import { initialValue, uiSchema } from "../shared";

  const schema = type({
    "id?": "string>=8&/^\\d+$/",
    "active?": "boolean",
    "skills?": "(string>=5)[]>=4",
    "multipleChoicesList?": "('foo'|'bar'|'fuzz')[]<=2",
  });

  type Value = typeof schema.infer;

  const validator = {
    ...createFormValueValidator({ schema, uiSchema }),
    isValid: () => true,
  } satisfies Validator;

  const form = createForm({
    ...defaults,
    schema: schema.toJsonSchema({
      dialect: "https://json-schema.org/draft-07/schema",
    }) as Schema,
    uiSchema,
    validator,
    initialValue: initialValue as Value,
  });
</script>

<BasicForm {form} novalidate />

<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"],
};

Limitations

You can use isValid: () => true as long as the generated form does not contain the following keywords oneOf, anyOf and if,them,else.

In such cases, you will need a real Validator interface implementation (You can take it from another validator or write it yourself).

Async validation

This validator supports async validation.

import { createAsyncFormValueValidator } from "@sjsf/form/validators/standard-schema";

const validator = {
  ...createAsyncFormValueValidator({ schema }),
};