Search code examples
javascriptvuejs2vee-validate

Vee-validate validating disabled field

I'm using vee-validate 3.2.1. I have a field that can be disabled, based on value from other field, the field is required if enabled but doesn't required if disabled.

My field is like this

<div class="vx-col sm:w-1/2 w-full">
    <ValidationProvider name="name" rules="required" v-slot="{ errors }">
        <select name="city"
            :disabled="cityDisabled" v-model="city">
            //options
        </select>
    </ValidationProvider
</div>

I want to use cityDisable variable to disable required validation. How can I do this?

Solution

  • Use the object form of the rules attribute and you can set required to true or false like so:

    <ValidationProvider name="name" :rules="{'required':!cityDisabled}" v-slot="{ errors }">