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 { RawForm, ON_INPUT } from "@sjsf/form";
  import { createValidator } from "@sjsf/cfworker-validator";

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

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

  const validator = createValidator({ uiSchema });

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

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

Async validation

This validator does not support async validation.

API

import type { Validator as CfValidator } from "@cfworker/json-schema";
import type { Schema, UiSchemaRoot, Config } from "@sjsf/form";
import type { Validator } from '@sjsf/cfworker-validator'

type CfValidatorFactory = (schema: Schema) => CfValidator;

interface ValidatorOptions {
  factory: CfValidatorFactory;
  /** @default {} */
  uiSchema?: UiSchemaRoot;
  /** @default DEFAULT_ID_PREFIX */
  idPrefix?: string;
  /** @default DEFAULT_ID_SEPARATOR */
  idSeparator?: string;
  /** @default makeValidatorFactory(factory) */
  createValidator?: (schema: Schema, rootSchema: Schema) => CfValidator;
  /** @default makeFieldValidatorFactory(factory) */
  createFieldValidator?: (config: Config) => CfValidator;
}

type ValidatorFactoryOptions = Omit<ValidatorOptions, "factory"> & {
  /** @default () => new CfValidator(schema, "7", false) */
  factory?: CfValidatorFactory;
};

function createValidator(options?: ValidatorFactoryOptions): Validator