Is it possible to display field titles in validation error messages instead of real field names?

[shijistar]

Prerequisites

• I have read the documentation

What theme are you using?

core

What is your question?

Is it possible to display field titles in validation error messages instead of real property names? Field titles may be clearer to users.
If I have to replace the property name in transformErrors, then how to get the field title from the validation error object?

[ademgashi]

+1

[cdolek]

+1

[dagda1]

This would be excellent, displaying the field name or using transformErrors means a lot of extra coding on every form to get decent error messages. Using the title would solve this.

When would you want to display the field name?

[heath-freenome]

@dagda1 @shijistar @ademgashi There is an OLD PR (#2634) that would fix this, but it is built on top of the earlier 4.x release. The code itself needs to be refactored on top of all the changes made in 5.x. If someone were to redo the code in the PR we'd be willing to merge it

[dagda1]

@dagda1 @shijistar @ademgashi There is an OLD PR (#2634) that would fix this, but it is built on top of the earlier 4.x release. The code itself needs to be refactored on top of all the changes made in 5.x. If someone were to redo the code in the PR we'd be willing to merge it

@heath-freenome I am having a look at this now.

What do you think would be the best approach in the validator-ajv8 package?

The errors coming back from rawValidation look like this:

[
   {
      instancePath: '',
      schemaPath: '#/required',
      keyword: 'required',
      params: { missingProperty: 'lastName' },
       message: "must have required property 'lastName'"
    }
]

We would somehow need to change the message in transformRJSFValidationErrors where we would need access to the schema.

I have had a rough hack as a means of getting some feedback. I'm not familiar with the codebase but would something like this work? I'm really not liking the string replace on the message, but I do not know a better way:

  private transformRJSFValidationErrors(
    schema: S,
    errors: ErrorObject[] = []
  ): RJSFValidationError[] {
    return errors.map((e: ErrorObject) => {
      const { instancePath, keyword, params, schemaPath, ...rest } = e;
      let { message } = rest;
      
      let property = instancePath.replace(/\//g, ".");
      let stack = `${property} ${message}`.trim();


      if ("missingProperty" in params) { 
        property = property
          ? `${property}.${params.missingProperty}`
          : params.missingProperty;

        const paths = property.replace(/^\./, '').split('.');
        const titlePath= paths.map((p, i) => i !== paths.length - 1 ? `${p}.${PROPERTIES_KEY}.` : `${p}.title`).join('');
        
        const title = get(schema, `${PROPERTIES_KEY}.${titlePath}`);

        if (title) {
          const existing = property.split('.').slice(-1)[0];
          message = message?.replace(existing, title);
        }
        
        stack = message!;
      }

      // put data in expected format
      return {
        name: keyword,
        property,
        message,
        params, // specific to ajv
        stack,
        schemaPath,
      };
    });
  }

Any feedback at all appreciated.

[dagda1]

@heath-freenome I've created #3337 as a better way of getting feedback.