Is it possible to mix up global rules and local ones (just a function) for validation?

[NicoHof]

What I want to do ist the following:

Using the Object Expression api: https://vee-validate.logaretm.com/v4/guide/global-validators#object-expressions

I have a field "url" which should have two validation rules combined

• required (global registered rule)
• custom validation function (it is only needed in this single component, so I would like to prevent registering it as a global rule with "defineRule()"

What I tried / would love to do:

<Field :rules="myRules" />

const myRules = {
  required: true, // global rule
  myValidation: () => {} // local rule, only needed here
}

I am not sure if this is not possible or if I just dont get it to work?

There was already a maybe related discussion but it did not help me in this case:
#4362

Docs also tell, that using just a function is a good idea:

https://vee-validate.logaretm.com/v4/guide/components/validation/

You can define validation rules for your fields using the Field component, your rules can be as simple as a function that accepts the current value and returns an error message.

[rcomesan]

Hey @NicoHof, I had the same problem this is how I managed to solve it:

import { useField, validate, normalizeRules } from 'vee-validate';
import type { FieldValidationMetaInfo } from '@vee-validate/i18n';

const globalRules = computed(() => {
  // reactive laravel-like string of global rules
  // parse it into an object expression
  return normalizeRules('required|min:5'); 
});

function validatorFn({ value }: { formData: Record<string, unknown>, value: unknown}): Promise<string | null> | string | null {
  // custom validator function
  // it can perform cross field validation using formData, or just the value of the field
  // it can also be async
  return value == 999 ? '999 is not allowed!' : null;
}

const validator = computed(() => {
  const rules = globalRules.value;

  return async (value: unknown, ctx: FieldValidationMetaInfo) => {
    if (validatorFn) {
      const error = await Promise.resolve(validatorFn({ formData: ctx.form, value }));
      if (error != null) return error;
    }

    // apply global rules
    const { errors } = await validate(value, rules, {
      label: ctx.label,
      values: ctx.form,
    });
    return errors.length ? errors[0] : true;
  };
});

const field = useField(props.name, validator, {
  label,
});

Hope it helps.