How can i override default error messages text in JSON forms

Question

TLDR: I need to customize the default error messages provided by JSON form. Eg if field is required then JSON form give error like is a required property, I want it to return error message text like Invalid input....

I've created a JSON form with schema something like

    {
    type: 'object',
    properties: {
        name: {
            type: 'string',
            minLength: 3,
        },
    },
    required: [
        'name',
    ],
    errorMessage: {
        required: 'INVALID INPUT. This is a required field',
    },
};

Now I've used this schema and a UI schema to create a JSON form

const ajv = createAjv();
require('ajv-keywords')(ajv);
require('ajv-errors')(ajv);
<JsonForms
    schema={schema}
    uischema={uischema}
    data={data}
    renderers={CustomRenderers}
    cells={vanillaCells}
    onChange={onChange}
    ajv={ajv}
/>

The above JSON form renders a UI form and when field is empty is gives standard error message like is a required property, now here i need to override with my own custom message, for that purpose https://github.com/ajv-validator/ajv-errors found to be useful and added property errorMessage in my schema, with required key having my custom message, also i added require('ajv-errors')(ajv); as it is needed but still im getting the default error message and not the one that i overwrite with in errorMessage.

Am i missing something here? Or can i have some other way to override the default message. Also along with required I'll have lot validations like minLength, maxLength etc whose default message i might have to override.

Also I'm expecting a lot other properties in schema, so adding errorMessage in every properties might not be very efficient, but if that is the only solution I've to go with it:)

score 2 · Accepted Answer · edited Jul 26 '21 at 00:08

I went ahead and added my own custom keyword

export default (ajv) => {
    ajv.addKeyword('customErrorMessages', {
        inline: generate_customErrorMessages,
        statements: true,
        valid: true,
        errors: 'full',
    });
    return ajv;
};

const generate_customErrorMessages = () => {
    var out = ' ';
    out += "vErrors = vErrors.map((v) => {"
    out += "if (v.keyword === 'required') {v.message = 'This field cannot be left blank.';} ";
    out += "else if (v.keyword === 'minLength') {v.message = `This field cannot be shorter than ${v.params?.limit} characters.`;} ";
    out += "else if (v.keyword === 'maxLength') {v.message = `This field cannot be longer than ${v.params?.limit} characters.`;} ";
    out += "else if (v.keyword === 'maximum') {v.message = `This field should be ${v.params?.comparison} ${v.params?.limit}`;} ";
    out += "else if (v.keyword === 'minimum') {v.message = `This field should be ${v.params?.comparison} ${v.params?.limit}`;}";
    out += "return v;});"
    return out;
};

Also I need to added the keyword in my schema as "customErrorMessages": true. With this my messages will be a part of code and not schema, I can also add different messages for different language and need not be dependent on schema.

Hello, can I know where to find the documentation of `inline`? I couldn't find it on the ajv website. — Thennarasu Ramasamy, Jun 22 '21 at 09:12
@ThennarasuRamasamy it was a part for earlier AJV release, i believe this is now replaced with `code generation function` https://ajv.js.org/keywords.html — Jawad, Sep 09 '21 at 20:22

score 0 · Answer 2 · answered Sep 06 '21 at 11:21

 {
type: 'object',
properties: {
    name: {
        type: 'string',
        minLength: 3,
    },
},
required: [
    'name',
],
"errorMessage": {
    "properties":{
           "name": 'INVALID INPUT. This is a required field'
      }
  
},

};

inside the errorMessage property, you should give property "name" in this case and your required custom message

How can i override default error messages text in JSON forms

2 Answers2