feat: provide form values as context for yup schema extending #4753 (#…

…4837)
logaretm · Oct 8, 2024 · f290933 · f290933
1 parent 3d2ec93
commit f290933
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 1 deletion.
diff --git a/packages/vee-validate/src/validate.ts b/packages/vee-validate/src/validate.ts
@@ -310,7 +310,7 @@ export async function validateTypedSchema<TValues extends GenericObject, TOutput
   values: TValues,
 ): Promise<FormValidationResult<TValues, TOutput>> {
   const typedSchema = isTypedSchema(schema) ? schema : yupToTypedSchema(schema);
-  const validationResult = await typedSchema.parse(deepCopy(values));
+  const validationResult = await typedSchema.parse(deepCopy(values), { formData: deepCopy(values) });
 
   const results: Partial<FlattenAndMapPathsValidationResult<TValues, TOutput>> = {};
   const errors: Partial<Record<Path<TValues>, string>> = {};

diff --git a/packages/vee-validate/tests/Form.spec.ts b/packages/vee-validate/tests/Form.spec.ts
@@ -3222,3 +3222,48 @@ test('provides form values as yup context refs', async () => {
   expect(pwError?.textContent).toBeFalsy();
   expect(cpwError?.textContent).toBeFalsy();
 });
+
+test('provides form values as yup context refs for schema validation', async () => {
+  mountWithHoc({
+    setup() {
+      const validationSchema = yup.object({
+        password: yup.string().required().min(3).label('Password'),
+        confirmPassword: yup
+          .string()
+          .required()
+          .oneOf([yup.ref('$password')])
+          .label('Confirm Password'),
+      });
+
+      return {
+        validationSchema,
+      };
+    },
+    template: `
+      <VForm  v-slot="{ errors }" :validation-schema="validationSchema">
+        <Field id="password" name="password" type="password" />
+        <span id="passwordErr">{{ errors.password }}</span>
+
+        <Field id="confirmPassword" name="confirmPassword" type="password" />
+        <span id="confirmPasswordErr">{{ errors.confirmPassword }}</span>
+
+        <button>Validate</button>
+      </VForm>
+    `,
+  });
+
+  const pwError = document.querySelector('#passwordErr');
+  const cpwError = document.querySelector('#confirmPasswordErr');
+
+  await flushPromises();
+  setValue(document.querySelector('#password') as HTMLInputElement, '123');
+  setValue(document.querySelector('#confirmPassword') as HTMLInputElement, '12');
+  await flushPromises();
+
+  expect(pwError?.textContent).toBeFalsy();
+  expect(cpwError?.textContent).toBeTruthy();
+  setValue(document.querySelector('#confirmPassword') as HTMLInputElement, '123');
+  await flushPromises();
+  expect(pwError?.textContent).toBeFalsy();
+  expect(cpwError?.textContent).toBeFalsy();
+});