fix: Validation error messages are inconsistent #4348

CHANGELOG.md

@@ -31,6 +31,10 @@ should change the heading of the (upcoming) version to include a major version b
 - Updated `getDefaultFormState()` to pass true to `mergeDefaultsWithFormData` for `defaultSupercedesUndefined` when `mergeDefaultsIntoFormData` has the value `useDefaultIfFormDataUndefined`, fixing [#4322](https://github.com/rjsf-team/react-jsonschema-form/issues/4322)
 - Updated `getClosestMatchingOption()` to improve the scoring of sub-property objects that are provided over ones that aren't, fixing [#3997](https://github.com/rjsf-team/react-jsonschema-form/issues/3977) and [#4314](https://github.com/rjsf-team/react-jsonschema-form/issues/4314)
 
+## @rjsf/validator-ajv8
+
+- Fixed `AJV8Validator#transformRJSFValidationErrors` to replace the error message field with either the `uiSchema`'s `ui:title` field if one exists or the `parentSchema` title if one exists. Fixes [#4348](https://github.com/rjsf-team/react-jsonschema-form/issues/4348)
+
 ## Dev / docs / playground
 
 - Updated the `form-props.md` to add documentation for the new `experimental_customMergeAllOf` props and the `experimental_defaultFormStateBehavior.mergeDefaultsIntoFormData` option

packages/validator-ajv8/src/processRawValidationErrors.ts

@@ -43,12 +43,12 @@ export function transformRJSFValidationErrors<
       const uiSchemaTitle = getUiOptions(get(uiSchema, `${property.replace(/^\./, '')}`)).title;
 
       if (uiSchemaTitle) {
-        message = message.replace(currentProperty, uiSchemaTitle);
+        message = message.replace(`'${currentProperty}'`, `'${uiSchemaTitle}'`);
       } else {
         const parentSchemaTitle = get(parentSchema, [PROPERTIES_KEY, currentProperty, 'title']);
 
         if (parentSchemaTitle) {
-          message = message.replace(currentProperty, parentSchemaTitle);
+          message = message.replace(`'${currentProperty}'`, `'${parentSchemaTitle}'`);
         }
       }
 

packages/validator-ajv8/test/validator.test.ts

@@ -1401,6 +1401,67 @@ describe('AJV8Validator', () => {
             expect(errorSchema.nested!.numberOfChildren!.__errors![0]).toEqual('must match pattern "\\d+"');
           });
         });
+        describe('replace the error message field with schema property title', () => {
+          beforeAll(() => {
+            const schema: RJSFSchema = {
+              type: 'object',
+              required: ['a', 'r'],
+              properties: {
+                a: { title: 'First Name', type: 'string' },
+                r: { title: 'Last Name', type: 'string' },
+              },
+            };
+
+            const formData = {};
+            const result = validator.validateFormData(formData, schema);
+            errors = result.errors;
+            errorSchema = result.errorSchema;
+          });
+          it('should return an error list', () => {
+            expect(errors).toHaveLength(2);
+
+            const stack = errors.map((e) => e.stack);
+
+            expect(stack).toEqual([
+              "must have required property 'First Name'",
+              "must have required property 'Last Name'",
+            ]);
+          });
+        });
+        describe('replace the error message field with uiSchema property title', () => {
+          beforeAll(() => {
+            const schema: RJSFSchema = {
+              type: 'object',
+              required: ['a', 'r'],
+              properties: {
+                a: { type: 'string', title: 'First Name' },
+                r: { type: 'string', title: 'Last Name' },
+              },
+            };
+            const uiSchema: UiSchema = {
+              a: {
+                'ui:title': 'uiSchema First Name',
+              },
+              r: {
+                'ui:title': 'uiSchema Last Name',
+              },
+            };
+
+            const formData = {};
+            const result = validator.validateFormData(formData, schema, undefined, undefined, uiSchema);
+            errors = result.errors;
+            errorSchema = result.errorSchema;
+          });
+          it('should return an error list', () => {
+            expect(errors).toHaveLength(2);
+            const stack = errors.map((e) => e.stack);
+
+            expect(stack).toEqual([
+              "must have required property 'uiSchema First Name'",
+              "must have required property 'uiSchema Last Name'",
+            ]);
+          });
+        });
       });
       describe('No custom validate function, single additionalProperties value', () => {
         let errors: RJSFValidationError[];