Vee-validate: "No such validator 'required_if' exists."

Question

I'm using vee-validate v3 with Vue 2.7. Specifically, here's the vee-validate entry in my package.json:

"vee-validate": "^3.4.5",

I'm having trouble getting the required_if rule working. When I try to use it, I get the error

Uncaught (in promise) Error: No such validator 'required_if' exists.

Here is the code:

<ValidationObserver>
  <ValidationProvider rules="" vid="country" v-slot="x">
    <select v-model="country">
      <option value="US">United States</option>
      <option value="OTHER">Other country</option>
    </select>
  </ValidationProvider>

  <ValidationProvider rules="required_if:country,US" v-slot="{ errors }">
    <input type="text" placeholder="state" v-model="state" />
    <span>{{ errors[0] }}</span>
  </ValidationProvider>
</ValidationObserver>

You may notice that this is in fact basically the exact example they give in their own documentation for the required_if rule over on https://vee-validate.logaretm.com/v3/guide/rules.html. I don't understand what I'm doing wrong here to get this error.

Answer 1

You have to import these rules, they are not installed by default

you can add these lines in you component:

import { required_if } from "vee-validate/dist/rules";
import { extend } from "vee-validate";
extend("required_if", required_if);

or you can create a plugin file and add all the rules that are not nstalled by default

import { extend } from 'vee-validate';
import * as rules from 'vee-validate/dist/rules';

Object.keys(rules).forEach(rule => {
 extend(rule, rules[rule]);
});

for (let [rule, validation] of Object.entries(rules)) {
 extend(rule, {
  ...validation
 });
}

ref: https://vee-validate.logaretm.com/v3/guide/rules.html

ps: make sure you have vee-validate greater than v3.1