Use of the custom rules with parameter (vue js - vee validate)

Question

I looked the documentation of Vee validate before asking for help here, I have a problem with the use of custom rules with parameter. In fact, the configuration of my rules is fine but I don't find the correct syntax to make it work properly in the component with a parameter. What should I write in the v-validate features of the concerned field?

Thanks for your help,

Here is my rule:

import { Validator } from 'vee-validate';

Validator.extend('isBigger', (value, [otherValue]) => {
    return value <= otherValue;
}, {
    hasTarget: true
});

I tried this but not working:

<b-form-input ref="bottom"
    name="sampling depth bottom"
    v-validate="{regex: /^-?\d+[.,]?\d{0,10}$/}"
    placeholder="(in cm)"
    v-model="inputSamplingDepthBot"
    ></b-form-input>

<b-form-input
    name="sampling depth top"
    v-validate="{isBigger:'bottom', regex: /^-?\d+[.,]?\d{0,10}$/}"
    placeholder="(in cm)"
    v-model="inputSamplingDepthTop"
    ></b-form-input>

From your code sample, it seems like you are trying to implement cross-field rules. You will get the documentation here: baianat.github.io/vee-validate/guide/…. The syntax seems correct, Can you provide a jsfiddle and state your problems more elaborately? — ATT

Alejandro Plaza Alejandro Plaza · Accepted Answer · 2020-02-07T20:13:18

No need to wrap the whole thing in curly braces. Try this out:

<b-form-input
    name="sampling depth top"
    v-validate="'isBigger:bottom, regex: /^-?\d+[.,]?\d{0,10}$/'"
    placeholder="(in cm)"
    v-model="inputSamplingDepthTop"
    ></b-form-input>

rule name and parameters should all be passed as a string.

if for some reason you need to pass a variable for the parameter, you can use backticks and interpolate the variables, like this:

<b-form-input
    name="sampling depth top"
    v-validate="`isBigger:${someVariable}, regex: /^-?\d+[.,]?\d{0,10}$/`"
    placeholder="(in cm)"
    v-model="inputSamplingDepthTop"
    ></b-form-input>

Use of the custom rules with parameter (vue js - vee validate)

1 Answers