fix(rules): add required_if rule for conditional field validation

.changeset/fix-4868-required-if-resubmit.md

@@ -0,0 +1,5 @@
+---
+"@vee-validate/rules": patch
+---
+
+Fix required_if rule not re-evaluating on subsequent submissions (#4868)

packages/rules/src/index.ts

@@ -23,12 +23,13 @@
 import one_of from './one_of';
 import regex from './regex';
 import required from './required';
+import required_if from './required_if';
 import size from './size';
 import url from './url';
 import { toTypedSchema } from './toTypedSchema';
 import { SimpleValidationRuleFunction } from '../../shared/types';
 
 export const all: Record<string, SimpleValidationRuleFunction<any, any>> = {
   alpha_dash,
   alpha_num,
   alpha_spaces,
@@ -54,6 +55,7 @@
   one_of,
   regex,
   required,
+  required_if,
   size,
   url,
 };
@@ -84,6 +86,7 @@
   one_of,
   regex,
   required,
+  required_if,
   size,
   url,
   toTypedSchema,

packages/rules/src/required_if.ts

@@ -0,0 +1,36 @@
+import { isEmpty } from './utils';
+import { isEmptyArray, isNullOrUndefined } from '../../shared';
+
+const requiredIfValidator = (
+  value: unknown,
+  params: [unknown, ...unknown[]] | { target: unknown; values?: unknown[] },
+) => {
+  let target: unknown;
+  let values: unknown[] | undefined;
+
+  if (Array.isArray(params)) {
+    target = params[0];
+    values = params.slice(1);
+  } else {
+    target = params.target;
+    values = params.values;
+  }
+
+  // Determine if the field should be required
+  let isRequired: boolean;
+
+  if (values && values.length) {
+    // eslint-disable-next-line eqeqeq
+    isRequired = values.some(val => val == target);
+  } else {
+    isRequired = !isNullOrUndefined(target) && !isEmptyArray(target) && !!String(target).trim().length;
+  }
+
+  if (!isRequired) {
+    return true;
+  }
+
+  return !isEmpty(value);
+};
+
+export default requiredIfValidator;

packages/rules/tests/required_if.spec.ts

@@ -0,0 +1,66 @@
+import validate from '../src/required_if';
+
+test('validates required_if with array params', () => {
+  // target has a matching value, field is empty -> invalid
+  expect(validate('', ['Online Banking', 'Online Banking'])).toBe(false);
+  expect(validate(null, ['Online Banking', 'Online Banking'])).toBe(false);
+  expect(validate(undefined, ['Online Banking', 'Online Banking'])).toBe(false);
+  expect(validate([], ['Online Banking', 'Online Banking'])).toBe(false);
+
+  // target has a matching value, field is filled -> valid
+  expect(validate('Nabil', ['Online Banking', 'Online Banking'])).toBe(true);
+
+  // target does not match any value, field is empty -> valid (not required)
+  expect(validate('', ['Cash', 'Online Banking'])).toBe(true);
+  expect(validate(null, ['Cash', 'Online Banking'])).toBe(true);
+  expect(validate(undefined, ['Cash', 'Online Banking'])).toBe(true);
+});
+
+test('validates required_if with object params', () => {
+  // target matches, field is empty -> invalid
+  expect(validate('', { target: 'Online Banking', values: ['Online Banking'] })).toBe(false);
+
+  // target matches, field is filled -> valid
+  expect(validate('Nabil', { target: 'Online Banking', values: ['Online Banking'] })).toBe(true);
+
+  // target does not match, field is empty -> valid
+  expect(validate('', { target: 'Cash', values: ['Online Banking'] })).toBe(true);
+});
+
+test('validates required_if with multiple comparison values', () => {
+  // target matches one of the values
+  expect(validate('', ['Online Banking', 'Online Banking', 'Wire Transfer'])).toBe(false);
+  expect(validate('', ['Wire Transfer', 'Online Banking', 'Wire Transfer'])).toBe(false);
+  expect(validate('Nabil', ['Online Banking', 'Online Banking', 'Wire Transfer'])).toBe(true);
+
+  // target matches none
+  expect(validate('', ['Cash', 'Online Banking', 'Wire Transfer'])).toBe(true);
+});
+
+test('validates required_if without comparison values (truthy target)', () => {
+  // target is truthy, no comparison values -> field is required
+  expect(validate('', ['some value'])).toBe(false);
+  expect(validate('filled', ['some value'])).toBe(true);
+
+  // target is empty/falsy, no comparison values -> field is not required
+  expect(validate('', [''])).toBe(true);
+  expect(validate('', [null])).toBe(true);
+  expect(validate('', [undefined])).toBe(true);
+});
+
+test('validates required_if with object params and no values array', () => {
+  // target is truthy -> required
+  expect(validate('', { target: 'truthy' })).toBe(false);
+  expect(validate('filled', { target: 'truthy' })).toBe(true);
+
+  // target is falsy -> not required
+  expect(validate('', { target: '' })).toBe(true);
+  expect(validate('', { target: null })).toBe(true);
+  expect(validate('', { target: undefined })).toBe(true);
+});
+
+test('uses loose equality for value comparison', () => {
+  // '1' == 1 should be true with loose equality
+  expect(validate('', ['1', 1])).toBe(false);
+  expect(validate('', [1, '1'])).toBe(false);
+});