VeeValidate - check validated input field to enable another input

Question

Its my first time using VeeValidate. How can I enable/disable a form field just when another is valid. For example, just enable password field after veevalidate checks the user field as valid.

You can keep the password input filed dynamically disabled whenever user field has an error. :disabled="error.has('nameOfUserField'). — Himanshu

Ryley Ryley · Accepted Answer · 2020-05-01T15:26:51

Wrap both relevant fields in a ValidationObserver and use it's scoped prop errors to tell you when the one field is invalid. Something like this (untested):

<ValidationObserver v-slot="{ errors }">
    <ValidationProvider vid="item1" rules="required">
        <input v-model="item1" />
    </ValidationProvider>
    <ValidationProvider vid="item2" rules="required">
        <input v-model="item2" :disabled="errors.item1"/>
    </ValidationProvider>
</ValidationObserver>

VeeValidate - check validated input field to enable another input

1 Answers