feat: validation schema support

Author: logaretm

packages/core/src/Observer.ts

@@ -11,9 +11,16 @@ export const ValidationObserver = defineComponent({
       type: String,
       default: undefined,
     },
+    validationSchema: {
+      type: Object,
+      default: undefined,
+    },
   },
   setup(props, ctx) {
-    const { form, errors, validate, handleSubmit, handleReset, values, ...flags } = useForm();
+    const { form, errors, validate, handleSubmit, handleReset, values, ...flags } = useForm({
+      validationSchema: props.validationSchema,
+    });
+
     provide('$_veeObserver', form);
 
     const slotProps = computed(() => {

packages/core/src/types.ts

@@ -86,6 +86,7 @@ export interface FieldComposite extends Record<Flag, Ref<boolean>> {
   failedRules: Ref<Record<string, string>>;
   errors: Ref<string[]>;
   errorMessage: Ref<string | undefined>;
+  __setRules(fn: GenericValidateFunction): void;
 }
 
 export interface FormController {

packages/core/src/useField.ts

@@ -22,8 +22,9 @@ type RuleExpression = MaybeReactive<string | Record<string, any> | GenericValida
 export function useField(fieldName: MaybeReactive<string>, rules: RuleExpression, opts?: FieldOptions): FieldComposite {
   const { value, form, immediate } = useFieldOptions(opts);
   const { flags, errors, failedRules, onBlur, handleChange, reset, patch } = useValidationState(value);
+  let schemaValidation: GenericValidateFunction;
   const normalizedRules = computed(() => {
-    return normalizeRules(unwrap(rules));
+    return schemaValidation || normalizeRules(unwrap(rules));
   });
 
   const validateField = async (): Promise<ValidationResult> => {
@@ -78,6 +79,9 @@ export function useField(fieldName: MaybeReactive<string>, rules: RuleExpression
     validate: validateField,
     handleChange,
     onBlur,
+    __setRules(fn: GenericValidateFunction) {
+      schemaValidation = fn;
+    },
   };
 
   useFormController(field, normalizedRules, form);

packages/core/src/useForm.ts

@@ -1,5 +1,5 @@
 import { computed, ref, Ref } from 'vue';
-import { Flag, FormController, SubmissionHandler } from './types';
+import { Flag, FormController, SubmissionHandler, GenericValidateFunction } from './types';
 import { unwrap } from './utils/refs';
 
 const mergeStrategies: Record<Flag, 'every' | 'some'> = {
@@ -29,7 +29,11 @@ function computeFlags(fields: Ref<any[]>) {
   }, {} as Record<Flag, Ref<boolean>>);
 }
 
-export function useForm() {
+interface FormOptions {
+  validationSchema: Record<string, GenericValidateFunction>;
+}
+
+export function useForm(opts?: FormOptions) {
   const fields: Ref<any[]> = ref([]);
   const fieldsById: Record<string, any> = {};
   const values = computed(() => {
@@ -50,8 +54,14 @@ export function useForm() {
 
   const controller: FormController = {
     register(field) {
+      const vid = unwrap(field.vid);
+      // Set the rules for that field from the schema.
+      if (opts?.validationSchema[vid]) {
+        field.__setRules(opts?.validationSchema[vid]);
+      }
+
       fields.value.push(field);
-      fieldsById[unwrap(field.vid)] = field;
+      fieldsById[vid] = field;
     },
     fields: fieldsById,
     values,

packages/core/src/validate.ts

@@ -74,10 +74,11 @@ async function _validate(field: FieldContext, value: any) {
   // if a generic function, use it as the pipeline.
   if (isCallable(field.rules)) {
     const result = await field.rules(value);
+    const isValid = typeof result !== 'string' && result;
 
     return {
-      valid: typeof result === 'string' || !result,
-      errors: typeof result === 'string' ? [{ msg: result, rule: '' }] : [],
+      valid: isValid,
+      errors: !isValid ? [{ msg: result, rule: '' }] : [],
     };
   }