Using Field rules without pre-defining them

[ttonyh]

I understand that there are at least 3 different ways to apply a rule to a field:

As a string:

<Field
...
rules="required|rule2"
...
></Field>

As an object:

<Field
...
:rules="{ required: true, rule2 true }"
...
></Field>

As a function:

<Field
...
:rules="myCustomRuleFn"
...
></Field>

And, some combination of the 3.

However, I've noticed that not all the different ways work with standard functions. Seems like only ones pre-defined using defineRule will work.

for example, this will not work with a custom function that is NOT pre-defined:

<Field
...
:rules="{ myCustomRuleFn: true }"
...
></Field>

Am I missing something? I feel like having to pre-define them globally shouldn't be necessary unless you want to use them as a string. But I'd rather not have to create a Plugin just to pre-define a bunch of rules globally. Schema based Form rules seem like the preferred way based on the docs; my preferred way is to do it per-field.

If field-based custom rule functions can't be applied (in all the different methods) w/o globally defining them first, is this something that could be changed possibly? I'd love to hear thoughts on this.

[logaretm]

Hello, well the following expression:

<Field
...
:rules="{ myCustomRuleFn: true }"
...
></Field>

Won't work because myCustomRuleFn is a property that does not access your function defined in the script. So vee-validate in the compiled output won't have access to it since it could be unscoped by the vue compiler since it is not used in the template.

We can think of a few ways to make defineRule more ergonomic. Like:

import { defineRule } from 'vee-validate';

defineRule({
  myCustomRuleFn,
  myOtherCustomRuleFn,
  yetAnotherCustomRuleFn,
});

Would that be sufficient or do you want to avoid using defineRule?

Another thing we could do is to allow object with methods as a rule expression so something like this:

<Field
...
:rules="{ myCustomRuleFn }"
...
></Field>

The problem with that is there won't be a way to pass in any arguments, so maybe it is not the ideal approach here.

Happy to hear your thoughts and other suggestions!

[ttonyh]

Thanks for the quick response! I see what you mean by Vee not having access to the function using the object notation. I think what I'm really after is not having to use a plugin to pre-define my rules. I've noticed that by using a plugin, (Nuxt 3/Vite etc.) that Vee library is is included in the entry.js file, which is getting too big.

Is there any harm in using defineRule per component, possibly referencing the same function (such as required) multiple times, for example? Will it duplicate / copy the required function internally?

Also, I suppose I'm not 100% against using Form/Schema (even with Yup/Zod) - if I do, can I target only the Fields that I want, leaving out the rest? I assume final form validation works the same way too?

Thanks again and for all your hard work on this library!

[logaretm]

Is there any harm in using defineRule per component

Duplicates are fine. However, if two rules have two different implementations but have the same name, then whichever is registered last will override the previous ones.

can I target only the Fields that I want, leaving out the rest? I assume final form validation works the same way too?

Yep, you can define field-level rules using zod or yup. I need to update the components docs to show that I guess. So something like this:

<template>
  <Field
  ...
  :rules="rules"
  ...
  />
</template>

<script setup>
import * as yup from 'yup';

// if you use options API then define this in setup or data (but mark it as raw if in data)
const rules = yup.string().required();
</script>

[ttonyh]

I like that last example; I'll give it a try! Thanks for your help!