fix: run validation on value change closes #4251

Author: logaretm

Diff for: .changeset/fast-jars-protect.md

@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+fix: run validation on value change closes #4251

Diff for: packages/vee-validate/src/Field.ts

@@ -147,17 +147,6 @@ const FieldImpl = defineComponent({
       ctx.emit('update:modelValue', value.value);
     };
 
-    const handleInput = (e: any) => {
-      if (!hasCheckedAttr(ctx.attrs.type)) {
-        value.value = normalizeEventValue(e);
-      }
-    };
-
-    const onInputHandler = function handleInputWithModel(e: any) {
-      handleInput(e);
-      ctx.emit('update:modelValue', value.value);
-    };
-
     const fieldProps = computed(() => {
       const { validateOnInput, validateOnChange, validateOnBlur, validateOnModelUpdate } =
         resolveValidationTriggers(props);
@@ -218,7 +207,7 @@ const FieldImpl = defineComponent({
         validate: validateField,
         resetField,
         handleChange: onChangeHandler,
-        handleInput: onInputHandler,
+        handleInput: e => onChangeHandler(e, false),
         handleReset,
         handleBlur,
         setTouched,

Diff for: packages/vee-validate/src/useField.ts

@@ -218,11 +218,7 @@ function _useField<TValue = unknown>(
   // Common input/change event handler
   function handleChange(e: unknown, shouldValidate = true) {
     const newValue = normalizeEventValue(e) as TValue;
-
-    setValue(newValue, false);
-    if (!validateOnValueUpdate && shouldValidate) {
-      validateWithStateMutation();
-    }
+    setValue(newValue, shouldValidate);
   }
 
   // Runs the initial validation
@@ -257,13 +253,14 @@ function _useField<TValue = unknown>(
     validateValidStateOnly();
   }
 
-  function setValue(newValue: TValue, validate = true) {
+  function setValue(newValue: TValue, shouldValidate = true) {
     value.value = newValue;
-    if (!validate) {
+    if (!shouldValidate) {
+      validateValidStateOnly();
       return;
     }
 
-    const validateFn = validateOnValueUpdate ? validateWithStateMutation : validateValidStateOnly;
+    const validateFn = shouldValidate ? validateWithStateMutation : validateValidStateOnly;
     validateFn();
   }
 

Diff for: packages/vee-validate/tests/useField.spec.ts

@@ -832,4 +832,42 @@ describe('useField()', () => {
     await flushPromises();
     expect(name?.textContent).toBe('second');
   });
+
+  test('handle change validates the field by default', async () => {
+    let field!: FieldContext;
+    const validator = vi.fn(val => (val ? true : REQUIRED_MESSAGE));
+    mountWithHoc({
+      setup() {
+        field = useField('field', validator);
+      },
+      template: `<div></div>`,
+    });
+
+    await flushPromises();
+    expect(validator).toHaveBeenCalledTimes(1);
+    expect(field.errorMessage.value).toBe(undefined);
+    field.handleChange('');
+    await flushPromises();
+    expect(field.errorMessage.value).toBe(REQUIRED_MESSAGE);
+  });
+
+  test('handle change can be configured to not validate the field', async () => {
+    let field!: FieldContext;
+    const validator = vi.fn(val => (val ? true : REQUIRED_MESSAGE));
+    mountWithHoc({
+      setup() {
+        field = useField('field', validator, { validateOnValueUpdate: false });
+      },
+      template: `<div></div>`,
+    });
+
+    await flushPromises();
+    expect(validator).toHaveBeenCalledTimes(1);
+    expect(field.errorMessage.value).toBe(undefined);
+    field.handleChange('', false);
+    await flushPromises();
+
+    expect(validator).toHaveBeenCalledTimes(2);
+    expect(field.errorMessage.value).toBe(undefined);
+  });
 });