[SOLVED] Vee-validate: "No such validator 'required

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

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.

Solution

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