@visaright/rjsf-validator NPM

About The Project

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

Built With

Getting Started

Prerequisites

React JsonSchema Form Utils

@rjsf/utils >= 5.0.0

yarn add @rjsf/core

Installation

yarn add @rjsf/validator-ajv6

Usage

import Form from '@rjsf/core';
import validator from '@rjsf/validator-ajv6';

const schema = {
  type: 'string',
};

<Form schema={schema} validator={validator} />

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

import Form from '@rjsf/core';
import { customizeValidator } from '@rjsf/validator-ajv6';

const customFormats = {
  'phone-us': /\(?\d{3}\)?[\s-]?\d{3}[\s-]?\d{4}$/
};

const validator = customizeValidator({
  customFormats,
});

const schema = {
  type: 'string',
  format: 'phone-us'
};

<Form schema={schema} validator={validator} />

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

import Form from '@rjsf/core';
import { customizeValidator } from '@rjsf/validator-ajv6';

const metaSchemaDraft04 = require("ajv/lib/refs/json-schema-draft-04.json");

const validator = customizeValidator({
  additionalMetaSchemas: [metaSchemaDraft04],
});

const schema = {
  "$schema": "http://json-schema.org/draft-04/schema#",
  type: 'string',
};

<Form schema={schema} validator={validator} />

Finally, you can combine both additional meta schemas and custom formats.

import Form from '@rjsf/core';
import { customizeValidator } from '@rjsf/validator-ajv6';

const metaSchemaDraft04 = require("ajv/lib/refs/json-schema-draft-04.json");

const customFormats = {
  'phone-us': /\(?\d{3}\)?[\s-]?\d{3}[\s-]?\d{4}$/
};

const validator = customizeValidator({
  additionalMetaSchemas: [metaSchemaDraft04],
  customFormats,
});

const schema = {
  "$schema": "http://json-schema.org/draft-04/schema#",
  type: 'string',
  format: 'phone-us'
};

<Form schema={schema} validator={validator} />