Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@rjsf/validator-ajv8
Advanced tools
@rjsf/validator-ajv8 is a validation package for React JSON Schema Form (RJSF) that uses AJV version 8 for JSON schema validation. It allows you to validate form data against a JSON schema, ensuring that the data conforms to the specified structure and constraints.
Schema Validation
This feature allows you to validate data against a JSON schema. The code sample demonstrates how to compile a schema and validate data using AJV.
const Ajv = require('ajv');
const ajv = new Ajv();
const schema = {
type: 'object',
properties: {
name: { type: 'string' },
age: { type: 'integer' }
},
required: ['name', 'age']
};
const validate = ajv.compile(schema);
const data = { name: 'John', age: 30 };
const valid = validate(data);
if (!valid) console.log(validate.errors);
Custom Keywords
This feature allows you to add custom validation keywords to your schema. The code sample shows how to add a custom keyword 'isPositive' and use it in a schema.
const Ajv = require('ajv');
const ajv = new Ajv();
ajv.addKeyword('isPositive', {
type: 'number',
validate: (schema, data) => data > 0
});
const schema = {
type: 'object',
properties: {
positiveNumber: { type: 'number', isPositive: true }
}
};
const validate = ajv.compile(schema);
const data = { positiveNumber: 10 };
const valid = validate(data);
if (!valid) console.log(validate.errors);
Error Messages
This feature provides detailed error messages when validation fails. The code sample demonstrates how to enable all error messages and validate data that does not meet the schema requirements.
const Ajv = require('ajv');
const ajv = new Ajv({ allErrors: true });
const schema = {
type: 'object',
properties: {
name: { type: 'string' },
age: { type: 'integer', minimum: 18 }
},
required: ['name', 'age']
};
const validate = ajv.compile(schema);
const data = { name: 'John', age: 16 };
const valid = validate(data);
if (!valid) console.log(validate.errors);
AJV (Another JSON Schema Validator) is a popular JSON schema validator used for validating data against JSON schemas. It is highly performant and supports JSON Schema draft-07 and later. Compared to @rjsf/validator-ajv8, AJV is a more general-purpose validator and can be used outside of the React JSON Schema Form context.
The jsonschema package is a simple and lightweight JSON schema validator for JavaScript. It supports JSON Schema draft-04 and is easy to use for basic validation needs. While it is not as feature-rich as AJV, it provides a straightforward way to validate JSON data. Compared to @rjsf/validator-ajv8, jsonschema is less powerful but may be sufficient for simpler use cases.
is-my-json-valid is a fast JSON schema validator that supports JSON Schema draft-04. It is designed for performance and can be used in both Node.js and browser environments. Compared to @rjsf/validator-ajv8, is-my-json-valid is focused on speed and may lack some of the advanced features provided by AJV.
AJV-8 based validator plugin for react-jsonschema-form
.
Explore the docs »
View Playground
·
Report Bug
·
Request Feature
Exports validator-ajv8
plugin for react-jsonschema-form
.
@rjsf/utils >= 5.0.0
yarn add @rjsf/core
yarn add @rjsf/validator-ajv8
import {RJSFSchema} from "packages/utils/dist/index";
import Form from 'packages/core/dist/index';
import validator from '@rjsf/validator-ajv8';
const schema: RJSFSchema = {
type: 'string',
};
<Form schema={schema} validator={validator}/>
or, using a more complex example using custom validator with custom formats
import { RJSFSchema } from "@rjsf/utils";
import Form from '@rjsf/core';
import { customizeValidator } from '@rjsf/validator-ajv8';
const customFormats = {
'phone-us': /\(?\d{3}\)?[\s-]?\d{3}[\s-]?\d{4}$/
};
const validator = customizeValidator({
customFormats,
});
const schema: RJSFSchema = {
type: 'string',
format: 'phone-us'
};
<Form schema={schema} validator={validator} />
or, using a more complex example using a custom with additional meta schema
import { RJSFSchema } from "@rjsf/utils";
import Form from '@rjsf/core';
import { customizeValidator } from '@rjsf/validator-ajv8';
const metaSchemaDraft06 = require("ajv/lib/refs/json-schema-draft-06.json");
const validator = customizeValidator({
additionalMetaSchemas: [metaSchemaDraft06],
});
const schema: RJSFSchema = {
"$schema": "http://json-schema.org/draft-06/schema#",
type: 'string',
};
<Form schema={schema} validator={validator} />
or, using a more complex example using custom validator config override options
import { RJSFSchema } from "@rjsf/utils";
import Form from '@rjsf/core';
import { customizeValidator } from '@rjsf/validator-ajv8';
const validator = customizeValidator({
ajvOptionsOverrides: {
$data: true,
verbose: true,
}
});
const schema: RJSFSchema = {
type: 'string',
};
<Form schema={schema} validator={validator} />
or, using a more complex example using ajv-formats
custom format options.
import { RJSFSchema } from "@rjsf/utils";
import Form from '@rjsf/core';
import { customizeValidator } from '@rjsf/validator-ajv8';
const validator = customizeValidator({
ajvFormatOptions: {
keywords: true,
formats: ["date", "time"]
}
});
const schema: RJSFSchema = {
type: 'string',
};
<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.
import { RJSFSchema } from "@rjsf/utils";
import Form from '@rjsf/core';
import { customizeValidator } from '@rjsf/validator-ajv8';
const metaSchemaDraft06 = require("ajv/lib/refs/json-schema-draft-06.json");
const customFormats = {
'phone-us': /\(?\d{3}\)?[\s-]?\d{3}[\s-]?\d{4}$/
};
const validator = customizeValidator({
additionalMetaSchemas: [metaSchemaDraft06],
customFormats,
ajvOptionsOverrides: {
$data: true,
verbose: true,
},
ajvFormatOptions: {
keywords: true,
formats: ["date", "time"]
}
});
const schema: RJSFSchema = {
"$schema": "http://json-schema.org/draft-06/schema#",
type: 'string',
format: 'phone-us'
};
<Form schema={schema} validator={validator} />
See the open issues for a list of proposed features (and known issues).
Read our contributors' guide to get started.
rjsf team: https://github.com/orgs/rjsf-team/people
GitHub repository: https://github.com/rjsf-team/react-jsonschema-form
5.0.0-beta.10
WrapIfAdditional
to WrapIfAdditionalTemplate
name
to the input
components that were missing it to support remix
CheckboxesWidget
and RadioWidget
to have unique id
s for each radio element by appending the option.value
, protecting against non-arraysantd
to Typescript, indirectly fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/3123)WrapIfAdditional
to WrapIfAdditionalTemplate
name
to the input
components that were missing it to support remix
CheckboxWidgets
code to eliminate a ternary in favor of a simple inline={inline}
property since all the rest of the props were the sameCheckboxesWidget
and RadioWidget
to have unique id
s for each radio element by appending the option.value
, removing unnecessary casts to any
and protecting against non-arraysCheckboxesWidget
incorrectly rendered inner <form>
elements around each checkbox, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/2355)WrapIfAdditional
to WrapIfAdditionalTemplate
name
to the input
components that were missing it to support remix
CheckboxesWidget
and RadioWidget
to have unique id
s for each radio element by appending the option.value
, removing unnecessary casts to any
and protecting against non-arraysWrapIfAdditional
to WrapIfAdditionalTemplate
name
to the input
components that were missing it to support remix
CheckboxesWidget
and RadioWidget
to have unique id
s for each radio element by appending the option.value
validate()
method on Form
to make schemaUtils
an optional third parameter rather than a required first parameter, making the signature backwards compatible with what was provided in previous versions.WrapIfAdditionalTemplate
. additionalProperties
is currently not supported in @rjsf/fluent-ui
(See #2777).name
or id
(for those fluent components not supporting name) to the input
components that were missing it to support remix
DateTimeWidget
to properly use BaseInputTemplate
rather than TextWidget
CheckboxesWidget
and RadioWidget
to have unique id
s for each radio element by appending the option.value
, removing unnecessary casts and protecting against non-arrays, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/2138)RadioWidget
so that it supports read-only and disabled statesWrapIfAdditional
to WrapIfAdditionalTemplate
name
to the input
components that were missing it to support remix
CheckboxesWidget
and RadioWidget
to have unique id
s for each radio element by appending the option.value
, removing unnecessary casts to any
and protecting against non-arraysWrapIfAdditional
to WrapIfAdditionalTemplate
name
to the input
components that were missing it to support remix
CheckboxesWidget
and RadioWidget
to have unique id
s for each radio element by appending the option.value
, removing unnecessary casts to any
and protecting against non-arraysWrapIfAdditional
to WrapIfAdditionalTemplate
ArrayFieldTemplate
and ObjectFieldTemplate
's AddButton
to show the non-labeled version. (https://github.com/rjsf-team/react-jsonschema-form/pull/3142)name
to the input
components that were missing it to support remix
, including fixing incorrect name
s as id
s in some situationsCheckboxesWidget
and RadioWidget
to have unique id
s for each radio element by appending the option.value
, protecting against non-arrayssemantic-ui
to TypescriptWrapIfAdditionalTemplate
and WrapIfAdditionalTemplateProps
to simplify theming and make it easier to override Field behavior for schemas with additionalProperties
.FAQs
The ajv-8 based validator for @rjsf/core
We found that @rjsf/validator-ajv8 demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.