ajv8 does not properly show errors inline under certain circumstances when ajv6 does

[cdolek]

Prerequisites

• I have read the documentation

What theme are you using?

core

What is your question?

With ajv6 the form errors (e.g. required properties) were displayed right under the form elements, which is very helpful especially when you use live validation.

While ajv8 validation marks form elements as invalid, error messages show up below the whole form. The longer the form, the higher chance of error messages being displayed outside users' view === bad user experience.

I would like the error messages to be shown right below the form elements. Is there a way to achieve this?

What I noticed is that rawErrors is not being passed to the individual form element using v8.

Help appreciated.

[cdolek]

@heath-freenome any insights on this? Thank you

[heath-freenome]

Hmmm, this may be a bug related to subtle differences between ajv6 and ajv8 and how we are using them. Do you have a reproducible test case?

[cdolek]

@heath-freenome check this out: https://codesandbox.io/s/nifty-breeze-rtd9vs?file=/src/App.tsx

[heath-freenome]

Here it is inside of the playground

[nickgros]

It looks like the Ajv raw errors for missing required properties doesn't point to the property, but to the object containing the required property in the schema. We may have to manually create the path in an error transform.

[heath-freenome]

It looks like the Ajv raw errors for missing required properties doesn't point to the property, but to the object containing the required property in the schema. We may have to manually create the path in an error transform.

Hopefully this is a fix in transformRJSFValidationErrors() in validator-ajv8 validator.ts