[Vuejs]-ValidationProvider rule for url checks

by

3👍

✅

In this example they use a pipe character (|) to separate the string rules:

<ValidationProvider rules="required|confirmed:confirm" v-slot="{ errors }">
...

However, if you want to pass an object as you are now (which may be best because it’s more complex than that example) then you need to bind the rules prop:

<ValidationProvider
  v-bind:rules="{ required : true, ... }"
  ...
>

<!-- Or shorthand binding syntax with : -->
:rules="{ required : true, ... }"

To explain the error you’re currently seeing:

No such validator ‘{ required ‘ exists.

That’s because, without binding the rules prop, you’re passing a raw string rather than an object. So it’s interpreting { required as the name of a validator, when that clearly is not a valid validator name.

ADDITION

Per this GitHub issue:

Now VeeValidate requires you to import the rules yourself. So you can either >import them rule by rule:

import { required, email } from 'vee-validate/dist/rules';

or you can import all rules once using:

import {
 ValidationProvider,
 ValidationObserver
} from 'vee-validate/dist/vee-validate.full';
👤Matt U

Leave a comment