CODEWITHSUNDEEP
formsvue.jsvalidationvuetify.js
Alex T
Alex T

Reputation: 3754

Vuetify form validation for disabled items

When adding conditional requirements for the v-select in the v-form to be validated, it does not work as expected. I used

:disabled="this.select3 !== `Y`"
:required="this.select3 === `Y`"

So that when select3 is Y (based on another v-select in the form) this v-select should become enabled and also should be treated as required within the form validation. Otherwise when it is disabled it should not be required and validation should omit it.

However, even when it is disabled it still treated as required. What is the correct way to use reuqired and disabled within the form so that, only enabled items in the form are taken into account for the validation?

Here is the example: https://codepen.io/pokepim/pen/RwGKOMp

Upvotes: 5

Views: 2159

Answers (1)

hamid niakan
hamid niakan

Reputation: 2861

here is the working example: conditional form validation in vuetify

basically what it does is that you define the rule in your data like this:

fillRule: (v) => !!v || 'Item is required'

then in your v-select you return the correct validation rules based on some condition like this:

<v-select :rules="select3 === 'Q' ? [fillRule] : []"></v-select>

above code snippet returns an array with desired rules if select3 === 'Q' and returns an empty array otherwise, hence no rules to check.

Upvotes: 7

Related Questions