Validation Stopped Working After Upgrading (with Disable HTML5 Validation)

[nok91]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

core

Version

5.x

Current Behavior

After upgrading from version 5.0.0 to 5.1.0, the form validation stopped functioning as expected, despite using the same schema. Activating the disableHTML5Validation option causes the native validation to not trigger immediately. Is now required to interact with the field before the native validation starts working, which wasn't the case in the previous version.

Expected Behavior

When using the same schema with disableHTML5Validation activated, validation should occur automatically. The form should prevent submission if any required fields are missing, even if the user hasn't interacted with them. This behavior should be consistent with how it worked in version 1.8.1, ensuring a seamless and consistent form validation experience.

Steps To Reproduce

Version 5.0.0
https://codesandbox.io/p/sandbox/j49msr

Version 5.1.0
https://codesandbox.io/p/sandbox/rjsf-5-1-0-2rhpsf

Playground
https://rjsf-team.github.io/react-jsonschema-form/#eyJmb3JtRGF0YSI6e30sInNjaGVtYSI6eyJkZWZpbml0aW9ucyI6eyJ1c2VyX3Rva2VuX2dlbmVyYXRpb24iOnsicHJvcGVydGllcyI6eyIxX1BlcHBlciI6eyJkZXNjcmlwdGlvbiI6IlBlcHBlciBmb3IgZ2VuZXJhdGluZyB1c2VyIFVVSURzIGFuZCBlbmNyeXB0aW9uIGtleXMuIFRoaXMgbXVzdCBoYXZlIGEgbWluaW11bSBsZW5ndGggb2YgMTYgY2hhcmFjdGVycy4iLCJtaW5MZW5ndGgiOjE2LCJ0aXRsZSI6IlBlcHBlciBQYXNzd29yZCIsInR5cGUiOiJzdHJpbmcifX0sInJlcXVpcmVkIjpbIjFfUGVwcGVyIl0sInRpdGxlIjoiVXNlciBUb2tlbiBHZW5lcmF0aW9uIiwidHlwZSI6Im9iamVjdCJ9fSwicHJvcGVydGllcyI6eyJVc2VyVG9rZW5HZW5lcmF0aW9uIjp7IiRyZWYiOiIjL2RlZmluaXRpb25zL3VzZXJfdG9rZW5fZ2VuZXJhdGlvbiIsInRpdGxlIjoiVXNlciBUb2tlbiBHZW5lcmF0aW9uMiJ9fSwidHlwZSI6Im9iamVjdCJ9LCJ1aVNjaGVtYSI6eyJSZW1vdGVQZXJzb25hbGlzYXRpb24iOnsiMl9Qcml2aWxlZ2VkUGFzc3dvcmQiOnsidWk6d2lkZ2V0IjoicGFzc3dvcmQifSwiM19VbnByaXZpbGVnZWRQYXNzd29yZCI6eyJ1aTp3aWRnZXQiOiJwYXNzd29yZCJ9LCJQcm94eU5vZGVzIjp7InVpOm9wdGlvbnMiOnsib3JkZXJhYmxlIjpmYWxzZX19fSwiVXNlclRva2VuR2VuZXJhdGlvbiI6eyIxX1BlcHBlciI6eyJ1aTp3aWRnZXQiOiJwYXNzd29yZCJ9fX0sInRoZW1lIjoiZGVmYXVsdCIsImxpdmVTZXR0aW5ncyI6eyJzaG93RXJyb3JMaXN0IjoidG9wIiwidmFsaWRhdGUiOmZhbHNlLCJkaXNhYmxlZCI6ZmFsc2UsIm5vSHRtbDVWYWxpZGF0ZSI6dHJ1ZSwicmVhZG9ubHkiOmZhbHNlLCJvbWl0RXh0cmFEYXRhIjpmYWxzZSwibGl2ZU9taXQiOmZhbHNlLCJleHBlcmltZW50YWxfZGVmYXVsdEZvcm1TdGF0ZUJlaGF2aW9yIjp7ImFycmF5TWluSXRlbXMiOnsiMCI6InAiLCIxIjoibyIsIjIiOiJwIiwiMyI6InUiLCI0IjoibCIsIjUiOiJhIiwiNiI6InQiLCI3IjoiZSIsInBvcHVsYXRlIjoiYWxsIiwibWVyZ2VFeHRyYURlZmF1bHRzIjp0cnVlfSwiYWxsT2YiOiJwb3B1bGF0ZURlZmF1bHRzIiwiZW1wdHlPYmplY3RGaWVsZHMiOiJza2lwRW1wdHlEZWZhdWx0cyJ9LCJmb2N1c09uRmlyc3RFcnJvciI6ZmFsc2UsImxpdmVWYWxpZGF0ZSI6ZmFsc2V9fQ==

Environment

- OS:Ubuntu-20.04 (WSL2)
- Node: 18.15.0
- yarn: 1.22.19

Anything else?

No response

[nok91]

Update: After digging further into the issue and trying to narrow it down, it seems that the described behavior starts occurring from version @rjsf/core@5.1.0 . In all versions prior to that (e.g., 5.0.2), the validation behaves correctly.

Reference: the issue was introduced here React JSON Schema Form v5.1.0 Release Notes

[heath-freenome]

@nok91 Which validator are you using? As far as I can tell, the issue is related to our upgrading from ajv@8.11.0 that was used in @rjsf/validator-ajv8@5.0.2 to ajv@8.12.0 in @rjsf/validator-ajv8@5.1.0. If you run your playground and click the Raw Validate button you will see that no error is returned, because the UserTokenGeneration prop is not required, therefore an empty object is valid.

There was probably a bug in ajv that was fixed in 8.12.0 which was causing the behavior you were expecting. So this is not a bug. It is an issue with your schema.

By making that field required as shown in this playground, then your error shows up again.

[nok91]

@heath-freenome I don't believe it's an issue with the validator; it seems to be within the core dependency, @rjsf/core.

We've tried using the latest version of @rjsf/validator-ajv8 combined with @rjsf/core@5.0.2, and the validation worked as expected. The issue only arises after upgrading the core to 5.1.0 or above, check the example below:

Success case using @rjsf/core@5.0.2 and @rjsf/validator-ajv8@5.22.1:
https://codesandbox.io/p/sandbox/rjsf-5-1-0-forked-xnp57j?workspaceId=ab7eb6cc-55d7-4af9-8bbe-a06c72985623

Changing the schema is not a straightforward solution for us, as we've been using this schema since react-jsonschema-form@1.8.1, and it worked fine up to version 5.0.0. It's disappointing that the only way to make it work now is to make changes to the schema. Could you please investigate further? This seems like an issue introduced in the core.

Additionally, the documentation does not indicate that the schema requires an outer required property ( https://rjsf-team.github.io/react-jsonschema-form/docs/json-schema/definitions). While your suggestion resolved the issue, it’s unclear why the schema worked fine from versions 1.8.1 to 5.0.0 without this modification

[heath-freenome]

@nok91 Even if the change is related to a fix in @rjsf/core, you were relying on an old bug which was fixed (probably #675). The solution is to update your schema.

[nok91]

@heath-freenome Thanks for the quick response. Could you point me to the specific documentation that explains how to properly define the schemas? The only section I found on schema definitions and references is the one referenced below, but the example used doesn't work (please see the playground link above). Is there any plan to update the documentation to include the fix mentioned ?

Documentation ref:
https://rjsf-team.github.io/react-jsonschema-form/docs/json-schema/definitions/

Example used in the documentation:
https://rjsf-team.github.io/react-jsonschema-form/#eyJmb3JtRGF0YSI6e30sInNjaGVtYSI6eyJkZWZpbml0aW9ucyI6eyJhZGRyZXNzIjp7InR5cGUiOiJvYmplY3QiLCJwcm9wZXJ0aWVzIjp7InN0cmVldF9hZGRyZXNzIjp7InR5cGUiOiJzdHJpbmcifSwiY2l0eSI6eyJ0eXBlIjoic3RyaW5nIn0sInN0YXRlIjp7InR5cGUiOiJzdHJpbmcifX0sInJlcXVpcmVkIjpbInN0cmVldF9hZGRyZXNzIiwiY2l0eSIsInN0YXRlIl19fSwidHlwZSI6Im9iamVjdCIsInByb3BlcnRpZXMiOnsiYmlsbGluZ19hZGRyZXNzIjp7IiRyZWYiOiIjL2RlZmluaXRpb25zL2FkZHJlc3MifSwic2hpcHBpbmdfYWRkcmVzcyI6eyIkcmVmIjoiIy9kZWZpbml0aW9ucy9hZGRyZXNzIn19fSwidWlTY2hlbWEiOnt9LCJ0aGVtZSI6ImRlZmF1bHQiLCJsaXZlU2V0dGluZ3MiOnsic2hvd0Vycm9yTGlzdCI6InRvcCIsInZhbGlkYXRlIjpmYWxzZSwiZGlzYWJsZWQiOmZhbHNlLCJub0h0bWw1VmFsaWRhdGUiOnRydWUsInJlYWRvbmx5IjpmYWxzZSwib21pdEV4dHJhRGF0YSI6ZmFsc2UsImxpdmVPbWl0IjpmYWxzZSwiZXhwZXJpbWVudGFsX2RlZmF1bHRGb3JtU3RhdGVCZWhhdmlvciI6eyJhcnJheU1pbkl0ZW1zIjp7IjAiOiJwIiwiMSI6Im8iLCIyIjoicCIsIjMiOiJ1IiwiNCI6ImwiLCI1IjoiYSIsIjYiOiJ0IiwiNyI6ImUiLCJwb3B1bGF0ZSI6ImFsbCIsIm1lcmdlRXh0cmFEZWZhdWx0cyI6dHJ1ZX0sImFsbE9mIjoicG9wdWxhdGVEZWZhdWx0cyIsImVtcHR5T2JqZWN0RmllbGRzIjoic2tpcEVtcHR5RGVmYXVsdHMifSwiZm9jdXNPbkZpcnN0RXJyb3IiOmZhbHNlLCJsaXZlVmFsaWRhdGUiOmZhbHNlfX0=

[heath-freenome]

This is what I use https://json-schema.org/understanding-json-schema
NOTE: RJSF only supports the older JSON schema 7 and not the latest. Even then, the documentation does tell you about older versions.

[heath-freenome]

Are you suggesting we update the documentation to look like this playground?

Also note that the documentation you specified is just showing how to use $ref