Ajv

Form validator implementation based on Ajv@8 JSON schema validator.

Installation

npm

npm i @sjsf/ajv8-validator

pnpm

pnpm add @sjsf/ajv8-validator

yarn

yarn add @sjsf/ajv8-validator

bun

bun add @sjsf/ajv8-validator

deno

deno add @sjsf/ajv8-validator

Required peer dependencies: @sjsf/form@3.5.0 ajv@8.17.0

Example

Basic None Actions

+page.sveltedemo-schema.ts

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

  import * as defaults from "$lib/sjsf/defaults";

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

  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>

Plugins

You can connect AJV plugins as follows:

import type { ValidatorFactoryOptions } from "@sjsf/form";
import { createFormValidator, addFormComponents } from "@sjsf/ajv8-validator";
import addFormats from "ajv-formats";

export const validator = <T>(options: ValidatorFactoryOptions) =>
  createFormValidator<T>({
    ...options,
    ajvPlugins: (ajv) => addFormComponents(addFormats(ajv)),
  });

Async validation

This validator supports async validation.

Asynchronous validation

import type { ValidatorFactoryOptions } from "@sjsf/form";
import { createAsyncFormValidator } from "@sjsf/ajv8-validator";
import { addFormComponents } from "@sjsf/ajv8-validator";

export const validator = <T>(options: ValidatorFactoryOptions) =>
  createAsyncFormValidator<T>({
    ...options,
    ajv: addFormComponents(yourAjvInstance),
  });

Precompiled validation

It is possible to use precompiled validator to avoid issues with unsafe-eval warnings from the browser caused by strict Content Security Policy settings.

Basic Actions

+page.sveltecompile-schema-script.tsinput-schema.jsonpatched-schema.tsvalidate-functions.js

<script lang="ts">
  import { createFormValidatorFactory } from "@sjsf/ajv8-validator/precompile";
  import { BasicForm, createForm, getValueSnapshot } from "@sjsf/form";
  import { resolver } from "@sjsf/form/resolvers/compat";
  import { fromValidators } from "@sjsf/form/validators/precompile";

  import * as defaults from "$lib/sjsf/defaults";

  import { schema, fieldsValidationMode } from "./patched-schema";
  import * as validateFunctions from "./validate-functions";

  const form = createForm({
    ...defaults,
    schema,
    validator: createFormValidatorFactory({
      validatorRetriever: fromValidators(validateFunctions),
    }),
    fieldsValidationMode,
    resolver,
  });
</script>

<BasicForm {form} novalidate />

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

Run the following command for schema compilation:

node compile-schema-script.ts