Fix: Better validation messages using schema/uiSchema title if it exists

CHANGELOG.md

@@ -22,6 +22,7 @@ should change the heading of the (upcoming) version to include a major version b
 
 ## @rjsf/validator-ajv8
 - Remove alias for ajv -> ajv8 in package.json. This fixes [#3215](https://github.com/rjsf-team/react-jsonschema-form/issues/3215).
+- Updated `AJV8Validator#transformRJSFValidationErrors` to return more human readable error messages.  The ajv8 `ErrorObject` message is enhanced by replacing the error message field with either the `uiSchema`'s `ui:title` field if one exists or the `parentSchema` title if one exists. Fixes [#3246](https://github.com/rjsf-team/react-jsonschema-form/issues/3246)
 
 # 5.0.0-beta-16
 

packages/validator-ajv8/package.json

@@ -33,7 +33,7 @@
     "lodash-es": "^4.17.15"
   },
   "peerDependencies": {
-    "@rjsf/utils": "^5.0.0-beta.12"
+    "@rjsf/utils": "^5.0.0-beta.16"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",

packages/validator-ajv8/src/createAjvInstance.ts

@@ -12,6 +12,7 @@ export const AJV_CONFIG: Options = {
   allErrors: true,
   multipleOfPrecision: 8,
   strict: false,
+  verbose: true,
 } as const;
 export const COLOR_FORMAT_REGEX =
   /^(#?([0-9A-Fa-f]{3}){1,2}\b|aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|purple|red|silver|teal|white|yellow|(rgb\(\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*,\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*,\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*\))|(rgb\(\s*(\d?\d%|100%)+\s*,\s*(\d?\d%|100%)+\s*,\s*(\d?\d%|100%)+\s*\)))$/;

packages/validator-ajv8/src/validator.ts

@@ -21,7 +21,10 @@ import {
   UiSchema,
   ValidationData,
   ValidatorType,
+  PROPERTIES_KEY,
+  getUiOptions,
 } from "@rjsf/utils";
+import get from "lodash/get";
 
 import { CustomValidatorOptionsType, Localizer } from "./types";
 import createAjvInstance from "./createAjvInstance";
@@ -199,20 +202,63 @@ export default class AJV8Validator<
    * At some point, components should be updated to support ajv.
    *
    * @param errors - The list of AJV errors to convert to `RJSFValidationErrors`
-   * @private
+   * @protected
    */
-  private transformRJSFValidationErrors(
-    errors: ErrorObject[] = []
+  protected transformRJSFValidationErrors(
+    errors: ErrorObject[] = [],
+    uiSchema?: UiSchema<T, S, F>
   ): RJSFValidationError[] {
     return errors.map((e: ErrorObject) => {
-      const { instancePath, keyword, message, params, schemaPath } = e;
+      const {
+        instancePath,
+        keyword,
+        params,
+        schemaPath,
+        parentSchema,
+        ...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;
-        stack = message!;
+        const currentProperty: string = params.missingProperty;
+        const uiSchemaTitle = getUiOptions(
+          get(uiSchema, `${property.replace(/^\./, "")}`)
+        ).title;
+
+        if (uiSchemaTitle) {
+          message = message.replace(currentProperty, uiSchemaTitle);
+        } else {
+          const parentSchemaTitle = get(parentSchema, [
+            PROPERTIES_KEY,
+            currentProperty,
+            "title",
+          ]);
+
+          if (parentSchemaTitle) {
+            message = message.replace(currentProperty, parentSchemaTitle);
+          }
+        }
+
+        stack = message;
+      } else {
+        const uiSchemaTitle = getUiOptions(
+          get(uiSchema, `${property.replace(/^\./, "")}`)
+        ).title;
+
+        if (uiSchemaTitle) {
+          stack = `'${uiSchemaTitle}' ${message}`.trim();
+        } else {
+          const parentSchemaTitle = parentSchema?.title;
+
+          if (parentSchemaTitle) {
+            stack = `'${parentSchemaTitle}' ${message}`.trim();
+          }
+        }
       }
 
       // put data in expected format
@@ -288,7 +334,7 @@ export default class AJV8Validator<
   ): ValidationData<T> {
     const rawErrors = this.rawValidation<ErrorObject>(schema, formData);
     const { validationError: invalidSchemaError } = rawErrors;
-    let errors = this.transformRJSFValidationErrors(rawErrors.errors);
+    let errors = this.transformRJSFValidationErrors(rawErrors.errors, uiSchema);
 
     if (invalidSchemaError) {
       errors = [...errors, { stack: invalidSchemaError!.message }];