Forms: Combined error messages are inflexible and presented in English

[kimroen]

🐛 Bug Report

When rendering a field with multiple validation props, a combined error message is shown. Example:

must NOT have more than 3 characters and must match pattern "^[a-zA-Z]$"

This error message has multiple problems:

• It is in English, unlike other messages
• It doesn't start with a capital letter
• It doesn't end with a period
• It is not customizable (in full or in part)

Here's an example from our application:

To Reproduce

Here is a CodeSandbox demonstrating the issue

Expected behavior

The error message is displayed in Norwegian or English, depending on the set language. As a bonus, It would be nice to be able to customize (showing the pattern isn't great, for instance)

Eufemia Version

Browser JS: 10.51.1

Browser CSS: 10.51.1

[kimroen]

As one might expect, this is because when there's more than one error from ajv, we're just passing through the errors directly, concatenated with " and ".

This happens here:

eufemia/packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts

Lines 985 to 988 in 0d83b81

	const error = ajvErrorsToOneFormError(
	schemaValidatorRef.current.errors,
	valueRef.current
	)

This calls the function ajvErrorsToOneFormError:

eufemia/packages/dnb-eufemia/src/extensions/forms/utils/ajv.ts

Lines 130 to 148 in 0d83b81

	export function ajvErrorsToOneFormError(
	errors?: ErrorObject[] | null,
	value?: unknown
	): FormError | undefined {
	if (!errors || errors.length === 0) {
	return
	}
	if (errors.length === 1) {
	const error = ajvErrorsTransformation(errors[0], value)
	if (!error) {
	return undefined
	}
	return ajvErrorToFormError(error)
	}
	const errorMessages = errors?.map((error) => error.message)
	return new FormError(errorMessages.join(' and '))
	}

Here, if there's just one error we transform it into a sensible FormError instance with extracted information, but if there are more then we fall back to some fairly simple behavior where we extract message and concat them all together:

eufemia/packages/dnb-eufemia/src/extensions/forms/utils/ajv.ts

Lines 146 to 147 in 0d83b81

	const errorMessages = errors?.map((error) => error.message)
	return new FormError(errorMessages.join(' and '))

I made this codesandbox where you can enter some text and see what the error objects look like (as well as replicating the concatenation behavior that leads to this error message):

• 🔗 Codesandbox

---

Now, I suppose the question is: What should it do instead?

Do we want it to combine multiple errors into one, or should we display multiple errors? Should we make ajv stop on the first error to avoid this all together (this matches the behavior of passing both a schema and validate function, for instance)?

[tujoworker]

Thank you for the good report and detailed feedback 🫶

[tujoworker]

Here is a fork of your good CSB that includes the fix. Thank you so much.

[tujoworker]

🎉 This issue has been resolved in version 10.54.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀