# Unclear of how to implement ajv-errors to display customer error messages below the label/input element

**URL:** <https://jsonforms.discourse.group/t/unclear-of-how-to-implement-ajv-errors-to-display-customer-error-messages-below-the-label-input-element/479>\
**Category:** General\
**Created:** [November 8, 2021, 9:54pm UTC](https://jsonforms.discourse.group/t/unclear-of-how-to-implement-ajv-errors-to-display-customer-error-messages-below-the-label-input-element/479 "2021-11-08T21:54:34Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![karolis-k](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/karolis-k/32/207_2.png) [@karolis-k](https://jsonforms.discourse.group/u/karolis-k)\
**Post date:** [November 8, 2021, 9:54pm UTC](https://jsonforms.discourse.group/t/unclear-of-how-to-implement-ajv-errors-to-display-customer-error-messages-below-the-label-input-element/479/1 "2021-11-08T21:54:34Z")

</div>

Hi all,

Thank you for your help in advance.  
I do not seem to get of how to implement ajv-errors into JSON Forms to display custom error messages on the DOM, basically to replace the default “is required property” message.  
I have followed the instructions, but it does not overwrite the message, i was able to get custom message printed inside console, but how do i pass it to JSON Forms to overwrite the default?  
I am sure it is something simple.

I am using:

```auto
"ajv": "^8.6.3",
"ajv-errors": "^3.0.0",    
"@jsonforms/core": "^3.0.0-alpha.2",
"@jsonforms/examples": "^3.0.0-alpha.2",
"@jsonforms/material-renderers": "^3.0.0-alpha.2",
"@jsonforms/react": "^3.0.0-alpha.2",
"@jsonforms/vanilla-renderers": "^3.0.0-alpha.2"

```

Code below:

```auto
const schema = {
  type: 'object',
  errorMessages: {
    type: 'should be an object',
    required: {
      description: 'description field is missing',
    },
  },
  properties: {
    description: {
      title: 'Long Description',
      type: 'string',
      minLength: 3,
      errorMessage: {
        required: 'foo must be an Integer',
      },
    },
  },
  required: ['description'],
  additionalProperties: false,
};

const initialData = {
  description: undefined,
};

const Ajv = require('ajv').default;
const ajv = new Ajv({
  allErrors: true,
  messages: true,
  strict: false,
  timestamp: true,
  ownProperties: true,
  verbose: true,
});

const validate = ajv.compile(schema);
console.log(validate(initialData));
console.log(validate.errors);

const App = () => {
  const [jsonformsData, setJsonformsData] = useState(initialData);

  return (
    <div className='App App-header'>
      <JsonForms
        ajv={ajv}
        schema={schema}
        uischema={uischema}
        data={jsonformsData}
        renderers={materialRenderers}
        cells={materialCells}
        onChange={({ errors, data }) => {
          setJsonformsData(data);
        }}
      />
    </div>
  );
};

```

![image](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/1X/fdfaf702a5a062245e28ccca908f9cab09284663.png)

Best regards,  
KK

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [November 10, 2021, 10:33am UTC](https://jsonforms.discourse.group/t/unclear-of-how-to-implement-ajv-errors-to-display-customer-error-messages-below-the-label-input-element/479/2 "2021-11-10T10:33:54Z")

</div>

Hi @karolis-k,

I don’t really see `ajv-errors` being used in the provided code. You need to wrap your AJV instance with ajv-errors and then hand over this instance to JSON Forms.

Unrelated note: Ideally you should use the `createAjv` method exported by `@jsonforms/core` to make sure you always have the options set which JSON Forms requires (except when you override them again).

* * *

Note that with the latest prerelease we now have i18n support in JSON Forms which also allows to customize the error messages. There is no documentation yet but it should be rather straightforward. If you want to use it: You can hand over an `i18n` object to the root component containing a `translate` function which is of type

```auto
(key: string, defaultMessage: string | undefined, args: any) => string | undefined

```

This translate function should return the `defaultMessage` when you don’t have a translation for the given `key`.

---

<div class="post-metadata">

**Author:** ![valtido](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/valtido/32/230_2.png) [@valtido](https://jsonforms.discourse.group/u/valtido)\
**Post date:** [January 4, 2022, 4:57pm UTC](https://jsonforms.discourse.group/t/unclear-of-how-to-implement-ajv-errors-to-display-customer-error-messages-below-the-label-input-element/479/3 "2022-01-04T16:57:09Z")

</div>

hi, What do you mean

> hand over an i18n object to the root component

do you have a more small sample of this?  
also, could you update the documentation, to be a bit more intuitive. it is a core functionality after all.

many thanks  
V

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [January 5, 2022, 7:58am UTC](https://jsonforms.discourse.group/t/unclear-of-how-to-implement-ajv-errors-to-display-customer-error-messages-below-the-label-input-element/479/4 "2022-01-05T07:58:53Z")

</div>

Hi @valtido,

there are no surprises here. Handing over an `i18n` object means to set the `i18n` prop. It is an object and can contain a `translate` function of the type mentioned above.

If you need some guidance you can check out the [Vue Vanilla example app](https://github.com/eclipsesource/jsonforms/blob/075bbc448cfb2bb209e86d6b1ea6460df23a9f64/README.md?plain=1#L48) in the JSON Forms repository or the [Vue2 Vuetify example app](https://github.com/eclipsesource/jsonforms-vuetify-renderers). Alternatively you could look at the [test cases](https://github.com/eclipsesource/jsonforms/blob/075bbc448cfb2bb209e86d6b1ea6460df23a9f64/packages/core/test/util/renderer.test.ts#L1262-L1732).

This internationalization support is very new and still not released in a stable version. Of course we [intend to document it](https://github.com/eclipsesource/jsonforms2-website/issues/207). The [JSON Forms documention is open source](https://github.com/eclipsesource/jsonforms2-website) too, so feel free to contribute 😉

---

<div class="post-metadata">

**Author:** ![valtido](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/valtido/32/230_2.png) [@valtido](https://jsonforms.discourse.group/u/valtido)\
**Post date:** [January 5, 2022, 4:02pm UTC](https://jsonforms.discourse.group/t/unclear-of-how-to-implement-ajv-errors-to-display-customer-error-messages-below-the-label-input-element/479/5 "2022-01-05T16:02:05Z")

</div>

> [@karolis-k](#):
>
> ```auto
> errorMessage: {
> required: 'foo must be an Integer',
> },
> 
> ```

Using a snipped from the Original Question, how can I override the error messages?  
I am happy to help with documentation of it afterwards.

I am not sure how I can override these messages from “is a required property” to “custom text message here”

I think, I may have confused you on my question above.

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [January 5, 2022, 5:04pm UTC](https://jsonforms.discourse.group/t/unclear-of-how-to-implement-ajv-errors-to-display-customer-error-messages-below-the-label-input-element/479/6 "2022-01-05T17:04:45Z")

</div>

In case you are using `ajv-errors` like in the original question then using `errorMessage.required` within JSON Schema should be fine. Create a new AJV instance outside of JSON Forms using our exported `createAjv` function and apply `ajv-errors` to it. Then hand over the instance via the `ajv` prop to JSON Forms. Note that we switched from AJV v6 to v8 in one of the 3.0.0 pre releases, so depending on the version of JSON Forms you’re using you need the respective `ajv-errors` version.

When you want to use our internationalization support for overwriting error messages then you can just check with which keys and default messages the translation function is called and then return your own text.

For required it should be called with the `key` starting with `must have required property {propertyname}` (as this is the original AJV error message), `<datapath>.error.required` (e.g. `name.error.required`) and `error.required`. Return your custom message for any of them and it will be used.

I would recommend using the following translation function:

```auto
const translator = (key, defaultMessage) => {
  console.log(`Key: ${key}, Default Message: ${defaultMessage}`);
  return defaultMessage;
};

<JsonForms
  i18n={{translate: translator}} />

```

This way you can easily see what keys are used in JSON Forms for your forms.

---

<div class="post-metadata">

**Author:** ![acis](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/acis/32/282_2.png) [@acis](https://jsonforms.discourse.group/u/acis)\
**Post date:** [March 26, 2022, 1:23pm UTC](https://jsonforms.discourse.group/t/unclear-of-how-to-implement-ajv-errors-to-display-customer-error-messages-below-the-label-input-element/479/7 "2022-03-26T13:23:40Z")

</div>

Hi, Stefan,

I’ve tried to do as advised, on a typescript app and I’m getting an error.

```auto
const translator = (id: string, defaultMessage: string) => {
        console.log(`Key: ${id}, Default Message: ${defaultMessage}`);
        return defaultMessage;
    };

```

```auto
<JsonForms
                i18n={{translate: translator}}
                schema={schema}
                uischema={uischema}
                data={data}
                renderers={materialRenderers}
                cells={materialCells}
                onChange={({ data, errors }) => setData(data)}
            />

```

```auto
Type '(id: string, defaultMessage: string) => string' is not assignable to type 'Translator'.
  Types of parameters 'defaultMessage' and 'defaultMessage' are incompatible.
    Type 'undefined' is not assignable to type 'string'. TS2322

```

I noticed that the type if the Translator is

```auto
export declare type Translator = {
    (id: string, defaultMessage: string, values?: any): string;
    (id: string, defaultMessage: undefined, values?: any): string | undefined;
};

```

Can you please advise? Thanks!

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [March 28, 2022, 10:00am UTC](https://jsonforms.discourse.group/t/unclear-of-how-to-implement-ajv-errors-to-display-customer-error-messages-below-the-label-input-element/479/8 "2022-03-28T10:00:37Z")

</div>

Hi @acis,

the `defaultMessage` could also be undefined. Your translator type needs to be adjusted for that, e.g.

```auto
const translator = (id: string, defaultMessage: string | undefined) => {
        console.log(`Key: ${id}, Default Message: ${defaultMessage}`);
        return defaultMessage;
    };

```

---

<div class="post-metadata">

**Author:** ![Icenwharth](https://avatars.discourse-cdn.com/v4/letter/i/90db22/32.png) [@Icenwharth](https://jsonforms.discourse.group/u/Icenwharth)\
**Post date:** [July 25, 2022, 12:21pm UTC](https://jsonforms.discourse.group/t/unclear-of-how-to-implement-ajv-errors-to-display-customer-error-messages-below-the-label-input-element/479/9 "2022-07-25T12:21:04Z")

</div>

Returning defaultMessage here leads to JsonForms complaining about the type returned. I solve it by returning `defaultMessage as string`, but I am not sure this is the right approch.

 ![Screenshot 2022-07-25 at 14.22.27](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/1X/384834aecf1850f82f110318f517338c5ee3f497.png)

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [July 25, 2022, 1:10pm UTC](https://jsonforms.discourse.group/t/unclear-of-how-to-implement-ajv-errors-to-display-customer-error-messages-below-the-label-input-element/479/10 "2022-07-25T13:10:18Z")

</div>

Hi @Icenwharth,

Seems we should improve our `Translator` type a bit. We only specified an overloaded `defaultMessage: string` and `defaultMessage: undefined`. My guess is that we should also offer a `defaultMessage: string | undefined` to express that returning `string | undefined` is fine there.

For now I would suggest just casting your translate function to the type `Translator`. Note that I would not recommend using the name `translateErrors` as we also offer a `translateError`. This might lead to confusion. I would just name it `translate`.

> I solve it by returning defaultMessage as string, but I am not sure this is the right approch.

Also works. Just make sure to only type cast and not really always returning a `string`.