feat: added built-in support for yup validation schema

Author: logaretm

packages/core/src/useField.ts

@@ -26,7 +26,8 @@ type RuleExpression = MaybeReactive<string | Record<string, any> | GenericValida
 export function useField(fieldName: MaybeReactive<string>, rules: RuleExpression, opts?: Partial<FieldOptions>) {
   const { value, form, immediate, bails, disabled } = normalizeOptions(opts);
   const { meta, errors, failedRules, onBlur, handleChange, reset, patch } = useValidationState(value);
-  let schemaValidation: GenericValidateFunction | string | Record<string, any>;
+  // eslint-disable-next-line prefer-const
+  let schemaValidation: GenericValidateFunction | string | Record<string, any> | undefined;
   const normalizedRules = computed(() => {
     return normalizeRules(schemaValidation || unwrap(rules));
   });
@@ -97,9 +98,7 @@ export function useField(fieldName: MaybeReactive<string>, rules: RuleExpression
   form.register(field);
 
   // set the rules if present in schema
-  if (form.schema?.[unwrap(fieldName)]) {
-    schemaValidation = form.schema[unwrap(fieldName)];
-  }
+  schemaValidation = extractRuleFromSchema(form.schema, unwrap(fieldName));
 
   // extract cross-field dependencies in a computed prop
   const dependencies = computed(() => {
@@ -270,3 +269,25 @@ function useAriAttrs(fieldName: MaybeReactive<string>, meta: Record<Flag, Ref<bo
     };
   });
 }
+
+/**
+ * Extracts the validation rules from a schema
+ */
+function extractRuleFromSchema(schema: Record<string, any> | undefined, fieldName: string) {
+  // no schema at all
+  if (!schema) {
+    return undefined;
+  }
+
+  // a yup schema
+  if (schema.fields?.[fieldName]) {
+    return schema.fields?.[fieldName];
+  }
+
+  // there is a key on the schema object for this field
+  if (schema[fieldName]) {
+    return schema[fieldName];
+  }
+
+  return undefined;
+}

packages/core/tests/Form.spec.ts

@@ -1,6 +1,7 @@
 import flushPromises from 'flush-promises';
 import { defineRule } from '@vee-validate/core';
 import { mountWithHoc, setValue } from './helpers';
+import * as yup from 'yup';
 
 describe('<Form />', () => {
   const REQUIRED_MESSAGE = `This field is required`;
@@ -245,6 +246,40 @@ describe('<Form />', () => {
     expect(submitMock).toHaveBeenCalledTimes(1);
   });
 
+  // test('validation schema with yup', async () => {
+  //   const wrapper = mountWithHoc({
+  //     setup() {
+  //       const schema = yup.object().shape({
+  //         email: yup.string().email(),
+  //         password: yup.string().required().min(8),
+  //       });
+
+  //       return {
+  //         schema,
+  //       };
+  //     },
+  //     template: `
+  //     <VForm @submit="submit" as="form" :validationSchema="schema" v-slot="{ errors }">
+  //       <Field name="field" as="input" />
+  //       <span id="field">{{ errors.field }}</span>
+
+  //       <Field name="other" as="input" />
+  //       <span id="other">{{ errors.other }}</span>
+
+  //       <button>Validate</button>
+  //     </VForm>
+  //   `,
+  //   });
+
+  //   const first = wrapper.$el.querySelector('#field');
+  //   const second = wrapper.$el.querySelector('#other');
+
+  //   await flushPromises();
+
+  //   expect(first.textContent).toBe('this is required');
+  //   expect(second.textContent).toBe('this is required');
+  // });
+
   test('validation schema to validate form', async () => {
     const wrapper = mountWithHoc({
       setup() {