CODEWITHSUNDEEP
vue.jsvee-validate
mstdmstd
mstdmstd

Reputation: 3097

ValidationProvider rule for url checks

In @vue/cli 4.0.5 app I need to add additive URL checks to ValidationProvider rules. My code:

<ValidationProvider
    name="website"
    rules="{ required : true, url: {require_protocol: true} }"
    v-slot="{ errors }"
>

But got this console error:

No such validator '{ required ' exists.

With rules:

    rules="required : true, url: {require_protocol: true}"

Error is:

No such validator 'required ' exists.

Which format is valid?

    "vee-validate": "^3.1.0",
    "vue": "^2.6.10",

MODIFIED BLOCK :

With rules :

:rules="{ required : true, url: {require_protocol: true} }"

I got next error :

vee-validate.esm.js?7bb1:708 Uncaught (in promise) Error: No such validator 'url' exists.

I expected all methods must be accessible, as I have in import part:

...
import {ValidationObserver, ValidationProvider, extend} from 'vee-validate'
import * as rules from 'vee-validate/dist/rules';

Object.keys(rules).forEach(rule => {
    extend(rule, rules[rule]);
});
import {localize} from 'vee-validate';

What is wrong ?

MODIFIED BLOCK #2 :

In vue file

   <ValidationProvider
        name="website"
        :rules="{ required : true }"
        v-slot="{ errors }"
    >


...

import { ValidationObserver, ValidationProvider } from 'vee-validate'
import { required, email } from 'vee-validate/dist/rules' // MY PHP STORM shows this line in gray color as nonused elements

I still got error :

vee-validate.esm.js?7bb1:708 Uncaught (in promise) Error: No such validator 'required' exists.

I found file /node_modules/vee-validate/dist/rules.js with lines :

var required = {
    validate: validate$o,
    params: params$h,
    computesRequired: computesRequired
};

var testEmpty = function (value) {
    return isEmptyArray(value) || includes([false, null, undefined], value) || !String(value).trim().length;
};
var validate$p = function (value, _a) {
    var target = _a.target, values = _a.values;
    var required;
    if (values && values.length) {
        if (!Array.isArray(values) && typeof values === 'string') {
            values = [values];
        }
        // eslint-disable-next-line
        required = values.some(function (val) { return val == String(target).trim(); });
    }
    else {
        required = !testEmpty(target);
    }
    if (!required) {
        return {
            valid: true,
            required: required
        };
    }
    return {
        valid: !testEmpty(value),
        required: required
    };
};
...

I do not see error syntax comparing with samples/provided link I declared ValidationObserver, ValidationProvider before required declaration. Where is the error ?

Thanks!

Upvotes: 0

Views: 6377

Answers (1)

Matt U
Matt U

Reputation: 5118

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';

Upvotes: 3

Related Questions