Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom validation error doesn't hide on good result #4365

Open
4 tasks done
shishmak opened this issue Nov 5, 2024 · 2 comments
Open
4 tasks done

Custom validation error doesn't hide on good result #4365

shishmak opened this issue Nov 5, 2024 · 2 comments
Labels

Comments

@shishmak
Copy link

shishmak commented Nov 5, 2024

Prerequisites

What theme are you using?

utils

Version

5.x

Current Behavior

Hello,
I need to have custom validation depense with 2 fields
Previosly I use rjsf 3.x and all works good. I upgrade project to 5.x and find bug (as I think).

I have a form with a dependency "Test" <= "Test2". I applied a custom validation where I specified this dependency.
const validate = (formData: any, errors: FormValidation) => { if (formData["Test"] > formData["Test2"]) errors["Test"]?.addError("Test should be LE than Test2"); return errors; };
And I noticed a problem:
Let's say initially I have Test = 10 and Test2 = 15
image
If I set Test2 = 5, then an error will appear near Test. This is the correct behavior
image
If I return Test2 = 15, then the error will not disappear. And this looks like a bug, because the values ​​​​Test (10) and Test2 (15) satisfy the condition "Test" <= "Test2"
image

example of my code:
https://codesandbox.io/p/sandbox/yyrxsp

Expected Behavior

If no validation errors are found, then no errors should be shown.

This error should not be there,
image

because according to the code the condition = false
const validate = (formData: any, errors: FormValidation) => { if (formData["Test"] > formData["Test2"]) errors["Test"]?.addError("Test should be LE than Test2"); return errors; };
Test < Test2 (10 < 15)

Steps To Reproduce

https://codesandbox.io/p/sandbox/yyrxsp

  1. set Test 2 = 5 (an error will appear near "Test 1")
  2. set Test 2 = 15 (the error near "Test 1" will not disappear)

Environment

- OS: windows 10
- Node: v20.11.0
- npm: 10.3.0

Anything else?

No response

@shishmak shishmak added bug needs triage Initial label given, to be assigned correct labels and assigned labels Nov 5, 2024
@heath-freenome heath-freenome changed the title Custom validation error don't hide on good resault Custom validation error doesn't hide on good result Nov 8, 2024
@heath-freenome
Copy link
Member

@shishmak First of all, you are using MobX incorrectly. In your sandbox I am seeing the following warnings:

[MobX] Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify: [email protected] 
    at eval (https://s9pdhk.csb.app/node_modules/mobx-react-lite/es/observer.js:43:47)
[MobX] Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify: [email protected] 
    at eval (https://s9pdhk.csb.app/node_modules/mobx-react-lite/es/observer.js:43:47)
[MobX] Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify: [email protected] 
    at eval (https://s9pdhk.csb.app/node_modules/mobx-react-lite/es/observer.js:43:47)

When doing a console.log of your formData as I type, I don't see it updating so perhaps this is leaving the form in a confused state.

Perhaps once you fix things with MobX the issue may be fixed?

@heath-freenome heath-freenome removed the needs triage Initial label given, to be assigned correct labels and assigned label Nov 8, 2024
@shishmak
Copy link
Author

@heath-freenome I fixed the mobX errors and added an example on React States. The error remained in both places

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants