@rjsf/validator-ajv8

AJV-8 based validator plugin for react-jsonschema-form.
Explore the docs »

View Playground · Report Bug · Request Feature

Table of Contents

• Table of Contents
• About The Project
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Roadmap
• Contributing
• Contact

About The Project

Exports validator-ajv8 plugin for react-jsonschema-form.

Built With

• react-jsonschema-form
• AJV
• TypeScript

Getting Started

Prerequisites

React JsonSchema Form Utils

• @rjsf/utils >= 5.0.0

1yarn add @rjsf/core

Installation

1yarn add @rjsf/validator-ajv8

Usage

1import { RJSFSchema } from 'packages/utils/dist/index';
2import Form from 'packages/core/dist/index';
3import validator from '@rjsf/validator-ajv8';
4
5const schema: RJSFSchema = {
6  type: 'string',
7};
8
9<Form schema={schema} validator={validator} />;

or, using a more complex example using custom validator with custom formats

1import { RJSFSchema } from '@rjsf/utils';
2import Form from '@rjsf/core';
3import { customizeValidator } from '@rjsf/validator-ajv8';
4
5const customFormats = {
6  'phone-us': /\(?\d{3}\)?[\s-]?\d{3}[\s-]?\d{4}$/,
7};
8
9const validator = customizeValidator({
10  customFormats,
11});
12
13const schema: RJSFSchema = {
14  type: 'string',
15  format: 'phone-us',
16};
17
18<Form schema={schema} validator={validator} />;

or, using a more complex example using a custom with additional meta schema

1import { RJSFSchema } from '@rjsf/utils';
2import Form from '@rjsf/core';
3import { customizeValidator } from '@rjsf/validator-ajv8';
4
5const metaSchemaDraft06 = require('ajv/lib/refs/json-schema-draft-06.json');
6
7const validator = customizeValidator({
8  additionalMetaSchemas: [metaSchemaDraft06],
9});
10
11const schema: RJSFSchema = {
12  $schema: 'http://json-schema.org/draft-06/schema#',
13  type: 'string',
14};
15
16<Form schema={schema} validator={validator} />;

or, using a more complex example using custom validator config override options

1import { RJSFSchema } from '@rjsf/utils';
2import Form from '@rjsf/core';
3import { customizeValidator } from '@rjsf/validator-ajv8';
4
5const validator = customizeValidator({
6  ajvOptionsOverrides: {
7    $data: true,
8    verbose: true,
9  },
10});
11
12const schema: RJSFSchema = {
13  type: 'string',
14};
15
16<Form schema={schema} validator={validator} />;

or, using a more complex example using ajv-formats custom format options.

1import { RJSFSchema } from '@rjsf/utils';
2import Form from '@rjsf/core';
3import { customizeValidator } from '@rjsf/validator-ajv8';
4
5const validator = customizeValidator({
6  ajvFormatOptions: {
7    keywords: true,
8    formats: ['date', 'time'],
9  },
10});
11
12const schema: RJSFSchema = {
13  type: 'string',
14};
15
16<Form schema={schema} validator={validator} />;

Finally, you can combine both additional meta schemas, custom formats, custom validator config override options and ajv-formats custom format options.

1import { RJSFSchema } from '@rjsf/utils';
2import Form from '@rjsf/core';
3import { customizeValidator } from '@rjsf/validator-ajv8';
4
5const metaSchemaDraft06 = require('ajv/lib/refs/json-schema-draft-06.json');
6
7const customFormats = {
8  'phone-us': /\(?\d{3}\)?[\s-]?\d{3}[\s-]?\d{4}$/,
9};
10
11const validator = customizeValidator({
12  additionalMetaSchemas: [metaSchemaDraft06],
13  customFormats,
14  ajvOptionsOverrides: {
15    $data: true,
16    verbose: true,
17  },
18  ajvFormatOptions: {
19    keywords: true,
20    formats: ['date', 'time'],
21  },
22});
23
24const schema: RJSFSchema = {
25  $schema: 'http://json-schema.org/draft-06/schema#',
26  type: 'string',
27  format: 'phone-us',
28};
29
30<Form schema={schema} validator={validator} />;

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Read our contributors' guide to get started.

Contact

rjsf team: https://github.com/orgs/rjsf-team/people

GitHub repository: https://github.com/rjsf-team/react-jsonschema-form