CODEWITHSUNDEEP
vue.jsvee-validate
Loki
Loki

Reputation: 1205

Vee validate: isBetween custom rule with parameters not working

validate, and Im trying to create multiple rules for my textfield for example: required, minlength, maxLength and chain them together, and based on whic h parameter is passed to preform validation

So I tried using example from the docs:

http://vee-validate.logaretm.com/v2/guide/custom-rules.html#args-and-rule-configuration

const isBetween = (value, { min, max } = {}) => {
  return Number(min) <= value && Number(max) >= value;
};

// The first param is called 'min', and the second is called 'max'.
const paramNames = ['min', 'max'];

Validator.extend('between', isBetween, {
  paramNames //  pass it in the extend options.
});

And my Vue model looks like this:

 <ValidationProvider
                    v-if="item && item.type === 'TEXT_AREA'"
                    :rules="`isBetween:true, 10`"
                    v-slot="{ errors, valid, validate }"
                >
                    <b-form-textarea
                        size="sm"
                        :id="`attribute`"
                        :value="attributeValue"
                        @input="addAttributeValue($event, uid, validate)"
                    />
                    <span>{{ displayError(errors) }}</span>
                </ValidationProvider>

Here I try to pass in IsBeterrn params like: required, length and based on that to preform validation but I always get min & max value as null, and arguments is array instead of object

Also my second question is how would I use required from vee-validate in my custom rule

Upvotes: 1

Views: 7591

Answers (1)

Ryley
Ryley

Reputation: 21226

You have two ways of specifying parameters, with strings or with objects. I suggest you use the object method like this:

<ValidationProvider
   :rules="{between:[0, 10]}"
>

You had a couple mistakes - the rule is called between because that's what you called it when you did this:

Validator.extend('between', isBetween, {
  paramNames //  pass it in the extend options.
});

Also, you can't use a boolean and a number as the parameter as you did here:

                :rules="`isBetween:true, 10`"

The way I specified it, with :rules="{between:[0, 10]}" also lets you make the min and max variable if you wanted, i.e. if you had a component data item called minValue you could use that in the rule like this :rules="{between:[minValue, 10]}" and your rules would react to changes to minValue.

Upvotes: 4

Related Questions