feat(validations): improved validation system

Author: alvarosabu

dev/typescript/App.vue

@@ -65,9 +65,6 @@
 import { mockAsync } from '@/core/utils/helpers';
 import { computed, defineComponent, onMounted, reactive, ref } from 'vue';
 import {
-  FormValidation,
-  email,
-  pattern,
   TextField,
   SelectField,
   EmailField,
@@ -77,6 +74,11 @@ import {
   RadioField,
   CustomField,
   ColorField,
+  Validator,
+  FormValidator,
+  required,
+  email,
+  pattern,
 } from '../../src';
 /* } from '../../dist/as-dynamic-forms.esm'; */
 export default defineComponent({
@@ -85,18 +87,18 @@ export default defineComponent({
     const title = ref('Vue Dynamic Forms');
     const formValues = reactive({});
     let consoleOptions = ref();
-    const emailValidator: FormValidation = {
+    const emailValidator: FormValidator = {
       validator: email,
       text: 'Email format is incorrect',
     };
 
-    const passwordValidator: FormValidation = {
+    const passwordValidator: FormValidator = Validator({
       validator: pattern(
         '^(?=.*[a-z])(?=.*[A-Z])(?=.*)(?=.*[#$^+=!*()@%&]).{8,10}$',
       ),
       text:
         'Password must contain at least 1 Uppercase, 1 Lowercase, 1 number, 1 special character and min 8 characters max 10',
-    };
+    });
 
     const form = computed(() => ({
       id: 'example-form',
@@ -118,7 +120,9 @@ export default defineComponent({
       fields: {
         name: TextField({
           label: 'Name',
-          required: true,
+          validations: [
+            Validator({ validator: required, text: 'This field is required' }),
+          ],
         }),
         email: EmailField({
           label: 'Email',

src/components/dynamic-form/DynamicForm.vue

@@ -14,6 +14,7 @@
       :submited="submited"
       @change="valueChange"
       @blur="onBlur"
+      @validate="onValidate"
     >
       <template v-slot:customField="props">
         <div
@@ -50,7 +51,14 @@ import { diff } from 'deep-object-diff';
 
 import DynamicInput from '../dynamic-input/DynamicInput.vue';
 
-import { DynamicForm, FieldTypes, FormControl, InputType } from '@/core/models';
+import {
+  DynamicForm,
+  FieldTypes,
+  FormControl,
+  InputType,
+  ValidationEvent,
+  InputEvent,
+} from '@/core/models';
 import { dynamicFormsSymbol } from '@/useApi';
 import { deepClone, hasValue, removeEmpty } from '@/core/utils/helpers';
 
@@ -194,20 +202,27 @@ export default defineComponent({
         if (updatedCtrl) {
           updatedCtrl.value = event.value as string;
           updatedCtrl.dirty = true;
-          validateControl(updatedCtrl);
         }
         ctx.emit('change', formValues.value);
       }
     }
 
-    function onBlur(control: FormControl<InputType>) {
-      const updatedCtrl = findControlByName(control.name);
+    function onBlur({ name }: InputEvent) {
+      const updatedCtrl = findControlByName(name);
       if (updatedCtrl) {
         updatedCtrl.touched = true;
       }
     }
 
-    function validateControl(control: FormControl<InputType>) {
+    function onValidate({ name, errors, valid }: ValidationEvent) {
+      const updatedCtrl = findControlByName(name);
+      if (updatedCtrl) {
+        updatedCtrl.errors = errors;
+        updatedCtrl.valid = valid;
+      }
+    }
+
+    /*     function validateControl(control: FormControl<InputType>) {
       if (control.validations) {
         const validation = control.validations.reduce((prev, curr) => {
           const val =
@@ -233,7 +248,7 @@ export default defineComponent({
         control.errors = validation;
         control.valid = Object.keys(validation).length === 0;
       }
-    }
+    } */
 
     function detectChanges(fields) {
       const changes = diff(cache, deepClone(fields));
@@ -288,6 +303,7 @@ export default defineComponent({
       submited,
       formattedOptions,
       onBlur,
+      onValidate,
     };
   },
 });

src/components/dynamic-input/DynamicInput.vue

@@ -24,6 +24,8 @@ import {
   InputType,
   BindingObject,
   FieldTypes,
+  ValidationEvent,
+  InputEvent,
 } from '@/core/models';
 
 import { values, keys, isArray, isObject } from '@/core/utils/helpers';
@@ -72,8 +74,10 @@ export default defineComponent({
         control: props?.control,
         style: props?.control.customStyles,
         onChange: valueChange,
-        onBlur: () => emit('blur', props.control),
-        onFocus: () => emit('focus', props.control),
+        onBlur: (e: InputEvent) => emit('blur', e),
+        onFocus: (e: InputEvent) => emit('focus', e),
+        onValidate: (validation: ValidationEvent) =>
+          emit('validate', validation),
       };
     });
 
@@ -241,7 +245,11 @@ export default defineComponent({
                 },
                 [
                   `${props?.control?.label}`,
-                  props?.control?.required ? requiredStar : '',
+                  props?.control?.validations?.some(
+                    validator => validator.type === 'required',
+                  )
+                    ? requiredStar
+                    : '',
                 ],
               )
             : null,

src/components/number-input/NumberInput.vue

@@ -2,6 +2,7 @@
 import { defineComponent, h, PropType } from 'vue';
 import { FormControl, NumberInput } from '@/core/models';
 import { useInputEvents } from '@/composables/input-events';
+import { useInputValidation } from '@/composables/use-validation';
 
 const props = {
   control: Object as PropType<FormControl<NumberInput>>,
@@ -12,6 +13,7 @@ export default defineComponent({
   props,
   setup(props, { emit }) {
     const { onChange, onFocus, onBlur } = useInputEvents(props, emit);
+    const { isRequired } = useInputValidation(props, emit);
 
     return () =>
       h('input', {
@@ -25,12 +27,12 @@ export default defineComponent({
         step: props?.control?.step,
         disabled: props?.control?.disabled,
         placeholder: props?.control?.placeholder,
-        required: props.control.required,
+        required: isRequired.value,
         readonly: props?.control.readonly,
         autocomplete: props.control.autocomplete,
         ariaLabel: props.control.ariaLabel,
         ariaLabelledBy: props.control.ariaLabelledBy,
-        ariaRequired: props.control.required,
+        ariaRequired: isRequired.value,
         onFocus,
         onBlur,
         onChange,

src/components/select-input/SelectInput.vue

@@ -2,7 +2,8 @@
 import { defineComponent, h, PropType, computed } from 'vue';
 import { FormControl, SelectInput } from '@/core/models';
 import { useInputEvents } from '@/composables/input-events';
-import { isArray, isObject } from '@/core/utils/helpers';
+import { isObject } from '@/core/utils/helpers';
+import { useInputValidation } from '@/composables/use-validation';
 
 const props = {
   control: Object as PropType<FormControl<SelectInput>>,
@@ -14,6 +15,7 @@ export default defineComponent({
   setup(props, { emit }) {
     return () => {
       const { onChange, onFocus, onBlur } = useInputEvents(props, emit);
+      const { isRequired } = useInputValidation(props, emit);
 
       const formattedOptions = computed(() => {
         if (isObject(props?.control?.options)) {
@@ -34,11 +36,11 @@ export default defineComponent({
           value: props?.control?.value,
           disabled: props?.control?.disabled,
           placeholder: props?.control?.placeholder,
-          required: props.control.required,
+          required: isRequired.value,
           readonly: props?.control.readonly,
           ariaLabel: props.control.ariaLabel,
           ariaLabelledBy: props.control.ariaLabelledBy,
-          ariaRequired: props.control.required,
+          ariaRequired: isRequired.value,
           onFocus,
           onBlur,
           onChange,

src/components/text-area-input/TextAreaInput.vue

@@ -2,6 +2,7 @@
 import { defineComponent, h, PropType } from 'vue';
 import { FormControl, TextAreaInput } from '@/core/models';
 import { useInputEvents } from '@/composables/input-events';
+import { useInputValidation } from '@/composables/use-validation';
 const props = {
   control: Object as PropType<FormControl<TextAreaInput>>,
 };
@@ -11,6 +12,7 @@ export default defineComponent({
   props,
   setup(props, { emit }) {
     const { onChange, onFocus, onBlur } = useInputEvents(props, emit);
+    const { isRequired } = useInputValidation(props, emit);
 
     return () =>
       h('textarea', {
@@ -22,12 +24,12 @@ export default defineComponent({
         cols: props?.control?.cols,
         disabled: props?.control?.disabled,
         placeholder: props?.control?.placeholder,
-        required: props.control.required,
+        required: isRequired.value,
         autocomplete: props.control.autocomplete,
         readonly: props?.control.readonly,
         ariaLabel: props.control.ariaLabel,
         ariaLabelledBy: props.control.ariaLabelledBy,
-        ariaRequired: props.control.required,
+        ariaRequired: isRequired.value,
         onFocus,
         onBlur,
         onChange,

src/components/text-input/TextInput.vue

@@ -9,6 +9,7 @@ import {
   UrlInput,
 } from '@/core/models';
 import { useInputEvents } from '@/composables/input-events';
+import { useInputValidation } from '@/composables/use-validation';
 
 const props = {
   control: Object as PropType<
@@ -20,20 +21,25 @@ export default defineComponent({
   name: 'asTextInput',
   props,
   setup(props, { emit }) {
-    const { onChange, onFocus, onBlur } = useInputEvents(props, emit);
+    const { onChange, onFocus, onBlur, getClasses } = useInputEvents(
+      props,
+      emit,
+    );
+    const { isRequired } = useInputValidation(props, emit);
+
     return () =>
       h('input', {
         id: props.control.name,
         name: props.control.name || '',
         type: props.control.type,
-        class: ['form-control'],
+        class: getClasses.value,
         value: props.control.value,
         disabled: props.control.disabled,
         placeholder: props.control.placeholder,
-        required: props.control.required,
+        required: isRequired.value,
         readonly: props?.control.readonly,
         autocomplete: props.control.autocomplete,
-        ariaRequired: props.control.required,
+        ariaRequired: isRequired.value,
         ariaLabel: props.control.ariaLabel,
         ariaLabelledBy: props.control.ariaLabelledBy,
         onFocus,

src/composables/input-events.ts

@@ -1,16 +1,20 @@
-/* eslint-disable */
+import { computed, watch } from 'vue';
+import { hasValue, isArray, isObject } from '../core/utils/helpers';
 
-import { watch } from 'vue';
-import { hasValue } from '../core/utils/helpers';
+import { useInputValidation } from '@/composables/use-validation';
+import { BindingObject } from '..';
 
 export function useInputEvents(props: any, emit: any) {
+  const { validate } = useInputValidation(props, emit);
+
   function onChange($event): void {
     if (props.control && hasValue($event.target.value)) {
       $event.stopImmediatePropagation();
 
+      validate();
       emit('change', {
         name: props.control.name,
-        value: $event.target.value
+        value: $event.target.value,
       });
     }
   }
@@ -25,25 +29,41 @@ export function useInputEvents(props: any, emit: any) {
     }
   }
   function onFocus(): void {
-    emit('focus');
+    emit('focus', { name: props.control.name });
   }
   function onBlur(): void {
-    emit('blur');
+    emit('blur', { name: props.control.name });
+    validate();
   }
 
-  watch(() => props?.control?.value, (curr, prev) => {
-    if(prev === undefined && hasValue(curr)) {
-      emit('change', {
-        name: props.control.name,
-        value: props.control.value
-      });
+  const getClasses = computed(() => {
+    const classes = ['form-control'];
+    if (isArray(props.control.customClass)) {
+      return [...classes, ...(props.control.customClass as BindingObject[])];
+    }
+    if (isObject(props.control.customClass)) {
+      return [...classes, props.control.customClass];
     }
-  })
+    return [classes, props.control.customClass];
+  });
+
+  watch(
+    () => props?.control?.value,
+    (curr, prev) => {
+      if (prev === undefined && hasValue(curr)) {
+        emit('change', {
+          name: props.control.name,
+          value: props.control.value,
+        });
+      }
+    },
+  );
 
   return {
     onFocus,
     onChange,
     onBlur,
     onCheck,
+    getClasses,
   };
 }