cfworker/json-schema

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

Installation

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

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

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

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

Example

form.svelte
shared.ts

<script lang="ts">
  import {
    BasicForm,
    createForm,
    getValueSnapshot,
    ON_ARRAY_CHANGE,
    ON_CHANGE,
    ON_INPUT,
  } from "@sjsf/form";
  import { createFormValidator } from "@sjsf/cfworker-validator";

  import * as defaults from "@/lib/form/defaults";

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

  const form = createForm({
    ...defaults,
    schema,
    uiSchema,
    validator: createFormValidator,
    fieldsValidationMode: ON_INPUT | ON_CHANGE | ON_ARRAY_CHANGE,
    initialValue,
  });
</script>

<BasicForm {form} novalidate />

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

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

Caveats

data-url and color formats are ignored.
By itself this validator does not support undefined values. But we use the valueToJSON function with the following default implementation to fix it, consider this overhead.
```
const valueToJSON = (v: FormValue) =>
  v === undefined || v === null
    ? null
    : typeof v === "object"
    ? JSON.parse(JSON.stringify(v))
    : v
```
It will also lead to incorrect error text (e.g. Instance type “null” is invalid. Expected “string”) where you would like to see the text this field is requred. This can be fixed using error transformation.

Async validation

This validator does not support async validation.