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

[Feature Request] Add 'optional' prop #20868

Closed
cintek opened this issue Jan 15, 2025 · 6 comments
Closed

[Feature Request] Add 'optional' prop #20868

cintek opened this issue Jan 15, 2025 · 6 comments

Comments

@cintek
Copy link

cintek commented Jan 15, 2025

Problem to solve

If you have multiple fields in a form which are optional you have to check if the field is empty in every single rule.

Proposed solution

It would be more comfortable if you could just add an optional prop. See also the PR #15191.

I would like to contribute a solution to Vuetify but currently I'm not sure how to solve the problem. The PR mentioned above made changes to validation.ts but then the contributor stopped before they finished it.

The last question was how to check if the value of a component is empty because the value of all components can be undefined but if they are not some can contain an empty array or an empty string. It depends on the type of component.

So my question is: Should you check which component is running the validation and depending on the type check if the value is empty? And it this approach is okay: How would I check this? If not: What would be a better approach?

@MatthewAry
Copy link
Contributor

Hi there. I've done some pretty sophisticated forms with Vuetify. Could you please produce an example of the problem you're having? As of right now, I can't understand the need for this feature since you can write your own validation functions which you can pass into the rules prop of the field and you can modify those functions to be optional.

@cintek
Copy link
Author

cintek commented Jan 17, 2025

Thanks for your answer @MatthewAry. Below is one example (don't look too close at the logic) with different fields with different rules. If I want all of them to be optional I have to add the condition v.length === 0 (I think this is what you meant). This would work but I don't know if it works for all kind of input fields. If Vuetify had an optional prop I could just add it and Vuetify would check if the input is empty or does fulfill all rules. I didn't have to think about how to make fields optional by myself so it's more like adding some comfort for developers.

https://play.vuetifyjs.com/#eNqtVMtu2zAQ/JWFLpIRP5K0vbiSi6BAb0WLppfC9kGWVwkLShQoSnBg+N+7JC2JbJTAAXIRxd3Z4XAfXB+DWmaLu6qatw0GyyBWWFQ8VbjalABxO0uryvyaTSZKlbIS5dlkjLmQRb83FoUHNcsZ8v1gBljKhmOdbIJK1CrlX8Uef2nLJnBRPN0hJ9BPA4KMUBD9qBQTZconPradFeTW6IHSRazihSvmTSILuurjK/q+a/8FygzPe4l6wlS+oukPuS+QpFkuVpSJYid24uDpYdQlWo9Z/WN6rV3giF4dNmtT3iDhzDp+n7tdrWSaKcBDSl35ciMsJapGljOx+4uZosg85fXzVugkDd1LRqd9LcZtcW2xExAvnMmgbZ1JVimo6WA7IKyohFRwBIk5nCCXooCQhirUcKBGLmsF4qzfJAUSMMmCZAVHq8DeA9adwNbxmczlELVzjuUDNV+SJHA96WKUpDT2QKT7u4EAdE+IOCpgdO71Z1pie/yZjixXVxM/ppOtcZ3aNduOQrBuuDqDonbiY7Ru9VShyHsgiQ+pvKx8CJ+d2ifCgn3nyV5OUzpcpuIvE9mG8HncrbcZzWiPOE3tn0kDWYfqDq+QzgPmURiaPPzv7arvdUO0NsX2qvtp68Sbl2SMeHiqyDvCcmuUWqye/TGO/mUZp/joUJih1zCbhiMopjguIfzGZK3CKZiJXsJNn6kBco8ZkewH0O0I6Pcjkw7kwxniSPDelkHxl7kS96aloomr/oZC44WdWJrV4DQtG87NZ/sPnBYXgg==

@J-Sek
Copy link
Contributor

J-Sek commented Jan 17, 2025

@cintek consider simple wrapper around lambda (or rule method if you put them in single file and reuse). This example looks pretty clean to me.

@J-Sek
Copy link
Contributor

J-Sek commented Jan 17, 2025

Actually in real life I never used such a wrapper. Required fields just get additional rule as the first item in the array and all other validation methods accept empty value.

for example:

// import { rules } from './utils/my-validation.ts'
<v-text-field type="email" :rules="[rules.required, rules.validEmail]" />
<v-text-field type="text" :rules="[rules.required, rules.postalCode]" />
<v-text-field type="datetime" :rules="[rules.required, rules.isFutureDate]" />

I think this is the established approach and (from the code perspective) is declarative and easy to understand while the only real cost is usually (v) => !v || ... at the beginning of each validation method that are already extracted and should not really bother you.

Alternatively... you would constantly think about validation messages - "would this message bother user if it fires on empty value?". IMO this feels like a recipe for unnecessary cognitive load.

@MatthewAry
Copy link
Contributor

@J-Sek That's what I was going to suggest! Here's my take on it. https://play.vuetifyjs.com/playgrounds/p1zjDg

After doing this exercise, I think the rules system in vuetify has some more room to grow because I would prefer to pass in just a single function instead of a function wrapped in an array that is accepting what is potentially another function or an array of functions for rule validation.

@cintek
Copy link
Author

cintek commented Jan 21, 2025

Required fields just get additional rule as the first item in the array and all other validation methods accept empty value.

Thanks for this approach. In the mean time I was already thinking about a wrapper but this also seems to be good or even better. We have some wrappers about Vuetify input components already and they automatically add an asterisk to their label if they receive truefor a requiredprop. So the additional rule for required fields could be added automatically by these wrapper components.

I close this issue since using rules is the preferred way to make fields optional (or required).

@cintek cintek closed this as completed Jan 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants