VeeValidate ValidationProvider "immediate" option not working with custom checkbox

35 Views Asked by At

I am using Vue v2.7 and VeeValidate v3. I am having trouble getting the "immediate" option to work on my ValidationProvider that I have wrapped around a custom checkbox component. Here's a snippet:

<ValidationProvider
  ref="gam"
  v-slot="{ errors, failedRules }"
  :rules="{
    required: true
  }"
  immediate
>
  <AppCheckbox
    :label="availableIntegrationModules[0].text"
    v-model="gam"
    :disabled="disabled"
    :errors="!failedRules.required ? errors : []"
    name="gam"
  />
</ValidationProvider>

If I call the .validate() method provided by the ValidationObserver that I have wrapping the entire component before making any changes with this checkbox unchecked, it will return no validation errors, despite this field being marked as required. If I toggle the checkbox on and then off again, the validation starts working as expected and gives me the corresponding error.

According to the docs, the immediate option is supposed to solve this and essentially validate as soon as the component mounts, disregarding any "touched/dirty/pristine" states. This works well for custom input components I have elsewhere with a basically identical setup to this, but in the case of this custom checkbox component, it seems that the immediate option has no effect at all. Am I missing something here or is the library itself bugged?

0

There are 0 best solutions below