-
-
Notifications
You must be signed in to change notification settings - Fork 7k
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
Comments
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 |
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 |
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 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. |
@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. |
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 I close this issue since using rules is the preferred way to make fields optional (or required). |
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?
The text was updated successfully, but these errors were encountered: