[Feature Request] Add 'optional' prop

[cintek]

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]

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]

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]

@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]

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]

@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]

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).