Validation

Whenever you change data in the forms generated by JSON Forms, it will be validated in the background in order to display any messages that violate the JSON schema.

Validation is handled by AJV and can be customized by passing a custom AJV instance as a prop to the JsonForms standalone component.

If you do not customize the validator, a default instance will be created for you. That default instance is configured as follows:

import Ajv from 'ajv';
import addFormats from 'ajv-formats';

const ajv = new AJV({
  allErrors: true,
  verbose: true,
  strict: false,
  ...options,
});
addFormats(ajv);

You can either create your own instance or you can use the createAjv function provided by JSON Forms that allows overriding the default options by passing in additional options.

For customizing or localizing AJV error messages we recommend ajv-errors.

ValidationMode

There are three different validation modes:

ValidateAndShow: Validates, emits and shows errors (which is the default)
ValidateAndHide: Validates and emits errors, but does not show them
NoValidation: Does not validate at all

You can set the validation mode in each JSON Form's root component. For example in React it could look like this:

<JsonForms
  schema={schema}
  uischema={uischema}
  data={data}
  renderers={materialRenderers}
  cells={materialCells}
  validationMode={currentValidationMode}
/>

Here you can see the different modes in action

Firstname

Lastname

must NOT have fewer than 1 characters

Current validation mode: ValidateAndShow

Emitted errors:

External Validation Errors

External errors (e.g. coming from a backend) can be supplied to the form via the additionalErrors prop. These errors are mixed in with the regular errors coming from the AJV validation. Whenever the external errors change, the prop needs to be updated. However, to avoid unnecessary rerenderings, it should be stable or memoized.

The additionalErrors are an array of type ErrorObject from AJV. The easiest way to declare an error for a property is by specifying the instancePath, which represents the path of the property in the schema, and a message string which will be used to display the error in the form.

const AdditionalErrorsExample = () => {
  
  const [additionalErrors, setAdditionalErrors] = useState<ErrorObject[]>([]);
  
  const addAdditionalError = () => {
      const newError: ErrorObject = {
          // AJV style path to the property in the schema
          instancePath: '/lastname',
          // message to display
          message: 'New error',
          schemaPath: '',
          keyword: '',
          params: {},
      };
      setAdditionalErrors(errors => [...errors, newError]);
  };

    return (
        <div>
            <JsonForms
                schema={schema}
                uischema={uischema}
                data={formData}
                renderers={materialRenderers}
                cells={materialCells}
                additionalErrors={additionalErrors}
            />
            <Button onClick={addAdditionalError} >
                Add Additional Error
            </Button>
        </div>
    );
};

Note that the validationMode property has no effect on additionalErrors, so even when handing over NoValidation or ValidateAndHide, the additional errors will still be shown.