Skip to content
PlaygroundForm Builder

ata-validator

Form validator implementation based on ata-validator JSON schema validator.

Terminal window
npm i @sjsf-lab/ata-validator

Required peer dependencies: @sjsf/form@3.5.0 ata-validator@0.21.0

<script lang="ts">
  import { createFormValidator } from "@sjsf-lab/ata-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>

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

<script lang="ts">
  import { createFormValidatorFactory } from "@sjsf-lab/ata-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:

Terminal window
node compile-schema-script.ts