vee-validate icon indicating copy to clipboard operation
vee-validate copied to clipboard

Make reactive meta.required

Open hanzelkatomas opened this issue 1 year ago • 4 comments

Is your feature request related to a problem? Please describe. meta.required is working well, however if we use form, which toggles some other inputs on user input and we also have conditional validation, which makes these fields required using for example string().when("otherInput", { is: "value", then: (s) => s.required() }, then meta.required is initially false and value doesn't change, when validation schema make certain field as a required field.

Describe the solution you'd like I would like have meta.required value reactive, so when validation schema make some input required, then this value would change to true. This gonna help style all required inputs in form consistenly. We can use red "*" to indicate that field is required even when field have been toggled by some other user input.

Example:

https://codesandbox.io/p/devbox/interesting-turing-gpktlp In this example we indicate field is required by changing color of input's label to red. If we make "middle name" input required, by checking checkbox, then color doesn't change.

hanzelkatomas avatar Jan 02 '24 16:01 hanzelkatomas

We currently walk the tree of validations applied on each schema provider, this won't work for dynamic schemas. So a different approach might be needed here.

I will mark this as an enhancement till I get time to experiment with other approaches.

logaretm avatar Jan 07 '24 14:01 logaretm

The codesandbox linked above misses some dependencies, here is a working reproduction https://codesandbox.io/p/devbox/interesting-turing-forked-69v6jt

paul-louyot avatar Apr 23 '24 10:04 paul-louyot

The demo works, you have to just wait a bit.

By the way I noticed also another issue with this feature. When validation schema is not passed to vee-validate during setup the vee-validate will mark all the inputs as not required. And then passing validation schema to vee-validate later won't take effect. Couldn't vee-validate watch if validation schema changes? This unwanted behavior is present in multistep forms, where is some advanced logic (ie. when defineAsyncComponent is used).

hanzelkatomas avatar Apr 24 '24 08:04 hanzelkatomas

This is partially implemented if you use refs instead to build your schemas in c4415f8a5fdec3dcb377c4e1a67399a089ee9d4a. Or computed which is a valid alternative to using the lazy APIs.

Still there is no support for lazy type support, because there is simply no way to notify vee-validate of schema changes when it happens. We would have to figure it out whenever the field is validated, only then do we have an opportunity to re-check.

I will still need to consider it more to find a different approach to do it.

logaretm avatar May 06 '24 00:05 logaretm