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 Validator } from "@sjsf/form";
  import { createFormValueValidator } from "@sjsf/form/validators/standard-schema";
  import { toJsonSchema } from "@valibot/to-json-schema";
  import * as v from "valibot";

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

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

  const schema = v.object({
    id: v.optional(
      v.pipe(
        v.string(),
        v.regex(new RegExp("\\d+"), "Must be a number"),
        v.minLength(8)
      )
    ),
    active: v.optional(v.boolean()),
    skills: v.optional(
      v.pipe(v.array(v.pipe(v.string(), v.minLength(5))), v.minLength(4))
    ),
    multipleChoicesList: v.optional(
      v.pipe(v.array(v.picklist(["foo", "bar", "fuzz"])), v.maxLength(2))
    ),
  });

  type Value = v.InferInput<typeof schema>;

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

  const form = createForm({
    ...defaults,
    schema: toJsonSchema(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 }),
};