feat: support yup validation schemas on field-level

Author: logaretm

packages/core/src/utils/rules.ts

@@ -19,8 +19,8 @@ export function normalizeRules(rules: any): GenericValidateFunction | Record<str
     return acc;
   }
 
-  // If its a single validate function, leave as is.
-  if (isCallable(rules)) {
+  // If its a single validate function or a yup fn, leave as is.
+  if (isCallable(rules) || isCallable(rules && rules.validate)) {
     return rules;
   }
 

packages/core/src/validate.ts

@@ -74,6 +74,10 @@ async function _validate(field: FieldValidationContext, value: any) {
     };
   }
 
+  if (isCallable(field.rules?.validate)) {
+    return validateWithYup(field, value);
+  }
+
   const errors: ReturnType<typeof _generateFieldError>[] = [];
   const rules = Object.keys(field.rules);
   const length = rules.length;
@@ -101,6 +105,32 @@ async function _validate(field: FieldValidationContext, value: any) {
   };
 }
 
+/**
+ * Handles yup validation
+ */
+async function validateWithYup(field: FieldValidationContext, value: any) {
+  const result = await field.rules
+    .validate(value)
+    .then(() => true)
+    .catch((err: Error) => {
+      // Yup errors have a name prop one them.
+      // https://github.com/jquense/yup#validationerrorerrors-string--arraystring-value-any-path-string
+      if (err.name === 'ValidationError') {
+        return err.message;
+      }
+
+      // re-throw the error so we don't hide it
+      throw err;
+    });
+
+  const isValid = typeof result !== 'string' && result;
+
+  return {
+    valid: isValid,
+    errors: !isValid ? [{ msg: result, rule: '' }] : [],
+  };
+}
+
 /**
  * Tests a single input value against a rule.
  */
@@ -117,6 +147,7 @@ async function _test(field: FieldValidationContext, value: any, rule: { name: st
     form: field.crossTable,
     rule,
   };
+
   const result = await validator(value, params, ctx);
 
   if (typeof result === 'string') {

packages/core/tests/Field.spec.ts

@@ -1,6 +1,7 @@
 import flushPromises from 'flush-promises';
 import { defineRule } from '@vee-validate/core';
 import { mountWithHoc, setValue, dispatchEvent } from './helpers';
+import * as yup from 'yup';
 
 jest.useFakeTimers();
 
@@ -355,6 +356,39 @@ describe('<Field />', () => {
     expect(error.textContent).toBe(REQUIRED_MESSAGE);
   });
 
+  test('yup rules can be used', async () => {
+    const wrapper = mountWithHoc({
+      setup() {
+        const rules = yup.string().required().min(8);
+
+        return {
+          rules,
+        };
+      },
+      template: `
+      <div>
+        <Field name="field" :rules="rules" v-slot="{ field, errors }">
+          <input v-bind="field" type="text">
+          <p>{{ errors[0] }}</p>
+        </Field>
+      </div>
+    `,
+    });
+
+    const input = wrapper.$el.querySelector('input');
+    const error = wrapper.$el.querySelector('p');
+
+    setValue(input, '');
+    await flushPromises();
+    expect(error.textContent).toBe('this is a required field');
+    setValue(input, '12');
+    await flushPromises();
+    expect(error.textContent).toBe('this must be at least 8 characters');
+    setValue(input, '12345678');
+    await flushPromises();
+    expect(error.textContent).toBe('');
+  });
+
   test('avoids race conditions between successive validations', async () => {
     // A decreasing timeout (the most recent validation will finish before new ones).
     defineRule('longRunning', value => {