cfworker/json-schema

Caution

This validator is experimental.

• data-url and color formats are ignored.
• By itself this validator does not support undefined values. And we don’t have any additional logic to handle it in this adapter. So you should provide custom merger instance and/or use emptyValue options in your UI schema.

Form validator implementation based on @cfworker/json-schema.

Installation

npm

npm i @sjsf/cfworker-validator @cfworker/json-schema

yarn

yarn add @sjsf/cfworker-validator @cfworker/json-schema

pnpm

pnpm add @sjsf/cfworker-validator @cfworker/json-schema

bun

bun add @sjsf/cfworker-validator @cfworker/json-schema

Example

form.svelte

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

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

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

  const validator = createValidator();

  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 does not support async validation.