How to make custom validation rules with VeeValidate 3 and vue.js

Question

I want to create custom rules for a form.

The example would be this:

     <label class="form-label">Price range from</label>
     <validation-provider rules="required_if:price_to" name="Price range from"
            v-slot="{ errors }">
        <input v-model="price_range_from" type="number"
                        ref="price_from">
        <span class="validation-error form-span">{{ errors[0] }}</span>
    </validation-provider>
                        </div>
                        <div class="ml-2 w-100">
     <label class="form-label">Price range to</label>
     <validation-provider name="Price range to"
                                                 v-slot="{ errors }">
        <input v-model="price_range_to" type="number" class="form-control"
                       ref="price_to" name="price_range_to">
        <span class="validation-error form-span">{{ errors[0] }}</span>
     </validation-provider>

Out of this part of form I want to create a rule which has logic of this:

• input of price_range_from is required if the price_range_to field is not null .
• input of price_range_from cannot be greater then price_range_to .
• And vice versa.

Script:

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

Object.keys(rules).forEach(rule => {
    extend(rule, rules[rule]);
});

extend('required', {
    ...required,
    message: 'This field is required'
});

Tried to read the documentation on [ https://logaretm.github.io/vee-validate/guide/forms.html] But couldn't find the answer how to make custom rules.

Would be glad if someone showed and example that I could understand and move forward and make more custom rules.

Answer 1

You can do this by targeting other fields: https://vee-validate.logaretm.com/v3/advanced/cross-field-validation.html#targeting-other-fields

import { extend } from 'vee-validate';

extend('password', {
  params: ['target'],
  validate(value, { target }) {
    return value === target;
  },
  message: 'Password confirmation does not match'
});

...

<ValidationObserver>
  <ValidationProvider rules="required|password:@confirm" v-slot="{ errors }">
    <input type="password" v-model="password">
    <span>{{ errors[0] }}</span>
  </ValidationProvider>


  <ValidationProvider name="confirm" rules="required" v-slot="{ errors }">
    <input type="password" v-model="confirmation">
    <span>{{ errors[0] }}</span>
  </ValidationProvider>
</ValidationObserver>

Read the docs to see more writing about how it works. Basically @confirm turns into target in the custom rule, and it corresponds to the name attribute on the input.

The validate function in the custom rule just returns a boolean for whether the field is valid or not, so you can add any custom logic in there and just make sure it returns a boolean.

In your case, it sounds like you want two different error messages, so you could consider making two custom rules.