fix: global and local rules can be combined on same field (#5025)

When both global rules (via defineRule) and local/inline validator
functions are used on the same field, they can now be combined using
either the object syntax or the array syntax.

Object syntax: { required: true, myLocalRule: myValidatorFn }
Array syntax: ['required', myValidatorFn]

Previously, the object syntax would throw "No such validator" because
function values were treated as rule parameters rather than inline
validators. The array syntax would throw "rule is not a function"
because string entries were called directly instead of being resolved
as global rules.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: logaretm

.changeset/fix-5025-global-local-rules.md

@@ -0,0 +1,5 @@
+---
+"vee-validate": patch
+---
+
+Allow combining global and local validation rules on the same field (#5025)

packages/vee-validate/src/useField.ts

@@ -119,6 +119,15 @@ function _useField<TValue = unknown>(
       return rulesValue;
     }
 
+    // If the rules object contains function values (inline validators mixed with global rules),
+    // pass it through as-is so that _validate can handle both types (#5025)
+    if (rulesValue && typeof rulesValue === 'object') {
+      const hasInlineFns = Object.values(rulesValue).some(v => isCallable(v));
+      if (hasInlineFns) {
+        return rulesValue;
+      }
+    }
+
     return normalizeRules(rulesValue);
   });
 

packages/vee-validate/src/validate.ts

@@ -96,6 +96,30 @@ async function _validate<TInput = unknown, TOutput = TInput>(
 
     for (let i = 0; i < length; i++) {
       const rule = pipeline[i];
+
+      // Handle string rules in arrays by resolving them as global rules
+      if (typeof rule === 'string') {
+        const stringRules = normalizeRules(rule);
+        const ruleNames = Object.keys(stringRules);
+        for (let j = 0; j < ruleNames.length; j++) {
+          const normalizedContext = {
+            ...field,
+            rules: stringRules,
+          };
+          const testResult = await _test(normalizedContext, value, {
+            name: ruleNames[j],
+            params: stringRules[ruleNames[j]],
+          });
+          if (testResult.error) {
+            errors.push(testResult.error);
+            if (field.bails) {
+              return { errors };
+            }
+          }
+        }
+        continue;
+      }
+
       const result = await rule(value, ctx);
       const isValid = typeof result !== 'string' && !Array.isArray(result) && result;
       if (isValid) {
@@ -121,6 +145,77 @@ async function _validate<TInput = unknown, TOutput = TInput>(
     };
   }
 
+  // If it's an object, separate function-valued rules from global rule references
+  if (typeof rules === 'object') {
+    // Check if the object contains any function values that should be treated as inline validators
+    const inlineFns: GenericValidateFunction<TInput>[] = [];
+    const globalRulesObj: Record<string, unknown> = {};
+    for (const key of Object.keys(rules)) {
+      if (isCallable(rules[key])) {
+        inlineFns.push(rules[key] as GenericValidateFunction<TInput>);
+      } else {
+        globalRulesObj[key] = rules[key];
+      }
+    }
+
+    const errors: ReturnType<typeof _generateFieldError>[] = [];
+
+    // Run global rules first
+    if (Object.keys(globalRulesObj).length) {
+      const normalizedContext = {
+        ...field,
+        rules: normalizeRules(globalRulesObj),
+      };
+      const rulesKeys = Object.keys(normalizedContext.rules);
+      for (let i = 0; i < rulesKeys.length; i++) {
+        const rule = rulesKeys[i];
+        const result = await _test(normalizedContext, value, {
+          name: rule,
+          params: normalizedContext.rules[rule],
+        });
+
+        if (result.error) {
+          errors.push(result.error);
+          if (field.bails) {
+            return { errors };
+          }
+        }
+      }
+    }
+
+    // Run inline function validators
+    if (inlineFns.length) {
+      const ctx = {
+        field: field.label || field.name,
+        name: field.name,
+        label: field.label,
+        form: field.formData,
+        value,
+      };
+
+      for (let i = 0; i < inlineFns.length; i++) {
+        const result = await inlineFns[i](value, ctx);
+        const isValid = typeof result !== 'string' && !Array.isArray(result) && result;
+        if (isValid) {
+          continue;
+        }
+
+        if (Array.isArray(result)) {
+          errors.push(...result);
+        } else {
+          const message = typeof result === 'string' ? result : _generateFieldError(ctx);
+          errors.push(message);
+        }
+
+        if (field.bails) {
+          return { errors };
+        }
+      }
+    }
+
+    return { errors };
+  }
+
   const normalizedContext = {
     ...field,
     rules: normalizeRules(rules),

packages/vee-validate/tests/validate.spec.ts

@@ -41,3 +41,71 @@ test('target params are filled in the params in message context', async () => {
     generateMessage: original,
   });
 });
+
+// #5025
+test('global and local rules can be combined in object syntax', async () => {
+  defineRule('required', (value: any) => {
+    if (!value && value !== 0) {
+      return 'This field is required';
+    }
+    return true;
+  });
+
+  const myLocalRule = (value: any) => {
+    if (typeof value === 'string' && value.length < 3) {
+      return 'Must be at least 3 characters';
+    }
+    return true;
+  };
+
+  // Both global and local rules should run - valid value
+  let result = await validate('hello', { required: true, myLocalRule } as any);
+  expect(result.valid).toBe(true);
+  expect(result.errors).toHaveLength(0);
+
+  // Global rule fails
+  result = await validate('', { required: true, myLocalRule } as any);
+  expect(result.valid).toBe(false);
+  expect(result.errors).toContain('This field is required');
+
+  // Local rule fails (bails: false to see both errors)
+  result = await validate('ab', { required: true, myLocalRule } as any, { bails: false });
+  expect(result.valid).toBe(false);
+  expect(result.errors).toContain('Must be at least 3 characters');
+
+  // Both rules pass
+  result = await validate('abc', { required: true, myLocalRule } as any);
+  expect(result.valid).toBe(true);
+});
+
+// #5025
+test('global and local rules can be combined in array syntax', async () => {
+  defineRule('required', (value: any) => {
+    if (!value && value !== 0) {
+      return 'This field is required';
+    }
+    return true;
+  });
+
+  const myLocalRule = (value: any) => {
+    if (typeof value === 'string' && value.length < 3) {
+      return 'Must be at least 3 characters';
+    }
+    return true;
+  };
+
+  // Both string global rules and function local rules in an array
+  let result = await validate('hello', ['required', myLocalRule] as any);
+  expect(result.valid).toBe(true);
+  expect(result.errors).toHaveLength(0);
+
+  // Global rule fails
+  result = await validate('', ['required', myLocalRule] as any);
+  expect(result.valid).toBe(false);
+  expect(result.errors).toContain('This field is required');
+
+  // Local rule fails
+  result = await validate('ab', ['required', myLocalRule] as any, { bails: false });
+  expect(result.valid).toBe(false);
+  expect(result.errors).toContain('Must be at least 3 characters');
+});