[Bug]: 'Required' Field Validation in JSON Form Not Working Correctly If Fields Are Hidden

[ame-appsmith]

Is there an existing issue for this?

• [X] I have searched the existing issues

Description

If we have 2 fields and want to alternatively make them required and visible, based on the selection from a dropdown, the Required validation does not work as expected and the Submit button stays disabled. It seems that once a field was marked as Required and it gets programmatically hidden, the Required mark does not get removed programmatically as it should (it ignores the JS condition). See the screen recording and sample app for more details. Front thread

Steps To Reproduce

1. Use a JSON Form having one select "Type" (options Red and Blue) and two Input widgets labeled "Red" and "Blue".
2. If the value of "Type" is "Red", then the "Red" field should be visible and required; also the "Blue" field should be non-required and hidden.
3. If the value of "Type" is "Blue", then the "Blue" field should be visible and required; also the "Red" field should be non-required and hidden.
4. For the Red Field in the required js put {{formData.Type == "Red"}} and visibility js put {{formData.Type == "Red"}}
5. For the Blue Field in the required js put {{formData.Type == "Blue"}} and visibility js put {{formData.Type == "Blue"}}
6. Now if the Type is selected as "Red", only the Red field should be visible and required, but this is not happening if we switch between red and blue in the type, it also considers both fields required validation.

Public Sample App

https://app.appsmith.com/app/jsonform-validation-required/page1-65280f6880b32971dff37e3c

Environment

Production

Issue video log

https://www.loom.com/share/50c7b4b6562544dfa598216aa82094fc

Version

Cloud v1.9.40

[Nikhil-Nandagopal]

Seems to be working!

[ame-appsmith]

It still does not work after resetting the form (see sample app and reproduction steps in the screen recording).