Merge pull request #22 from alvarosaburido/feature/allow_valdiation_on_change

Input autovalidation on blur

Author: alvarosabu

dev/App.vue

@@ -150,6 +150,7 @@ const data = () => ({
       }),
     ],
     options: {
+      // autoValidate: true,
       customClass: 'row',
       netlify: true,
     },

src/components/dynamic-input/DynamicInput.js

@@ -71,15 +71,25 @@ const watch = {
 };
 
 const computed = {
+  getClasses() {
+    return [
+      'dynamic-input',
+      'form-group',
+      {
+        'form-group--error': this.showErrors,
+      },
+      `${this.formControl.customClass || ''}`,
+    ];
+  },
   hasValue() {
     const { value } = this.formControl;
     return value !== null && value !== undefined;
   },
-  hasErrors() {
+  showErrors() {
     return (
       this.formControl.errors &&
       Object.keys(this.formControl.errors).length > 0 &&
-      this.submited
+      (this.submited || this.autoValidate)
     );
   },
   errorMessages() {
@@ -92,6 +102,11 @@ const computed = {
   submited() {
     return this.$parent.submited;
   },
+  autoValidate() {
+    return (
+      this.$parent.options.autoValidate && this.formControl.touched === true
+    );
+  },
 };
 
 const DynamicInput = {

src/components/dynamic-input/DynamicInput.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="dynamic-input form-group"
-    :class="({ 'form-group--error': hasErrors }, `${formControl.customClass || ''}`)"
-  >
+  <div :class="getClasses">
     <label
       class="form-label"
       :for="formControl.name"
@@ -47,7 +44,7 @@
       :onFocus="onFocus"
       :onBlur="onBlur"
     />
-    <div v-if="hasErrors">
+    <div v-if="showErrors">
       <p
         v-for="(errorText, $index) in errorMessages"
         :key="`${$index}`"

src/core/utils/form-control.model.js

@@ -61,11 +61,13 @@ export function FormValidation(
 export function FormOptions({
   customClass = '',
   method = 'POST',
+  autoValidate = false,
   netlify = false,
   netlifyHoneypot = null,
 }) {
   this.customClass = customClass;
   this.method = method;
+  this.autoValidate = autoValidate;
   this.netlify = netlify;
   this.netlifyHoneypot = netlifyHoneypot;
 }