Fixes issue related to: https://github.com/vuejs/vue/issues/11058

dist/formulate.esm.js

@@ -1047,8 +1047,8 @@ function mergedValidationName () {
  * @return {boolean}
  */
 function showFieldErrors () {
-  if (this.showErrors) {
-    return this.showErrors
+  if (this.showErrors || this.formShouldShowErrors) {
+    return true
   }
   return this.behavioralErrorVisibility
 }
@@ -1178,7 +1178,7 @@ var script = {
       default: 'text'
     },
     name: {
-      type: [Boolean, String],
+      type: [String, Boolean],
       default: true
     },
     /* eslint-disable */
@@ -1274,6 +1274,7 @@ var script = {
       localAttributes: {},
       internalModelProxy: this.formulateValue,
       behavioralErrorVisibility: (this.errorBehavior === 'live'),
+      formShouldShowErrors: false,
       validationErrors: [],
       pendingValidation: Promise.resolve()
     }
@@ -1575,7 +1576,8 @@ var script$1 = {
   data: function data () {
     return {
       registry: {},
-      internalFormModelProxy: {}
+      internalFormModelProxy: {},
+      formShouldShowErrors: false
     }
   },
   computed: {
@@ -1635,8 +1637,14 @@ var script$1 = {
     },
     formSubmitted: function formSubmitted () {
       // perform validation here
+      this.showErrors();
       this.$emit('submit', this.formModel);
     },
+    showErrors: function showErrors () {
+      for (var fieldName in this.registry) {
+        this.registry[fieldName].formShouldShowErrors = true;
+      }
+    },
     getFormValues: function getFormValues () {
       return this.internalFormModelProxy
     }

dist/formulate.min.js

@@ -1050,8 +1050,8 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
    * @return {boolean}
    */
   function showFieldErrors () {
-    if (this.showErrors) {
-      return this.showErrors
+    if (this.showErrors || this.formShouldShowErrors) {
+      return true
     }
     return this.behavioralErrorVisibility
   }
@@ -1181,7 +1181,7 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
         default: 'text'
       },
       name: {
-        type: [Boolean, String],
+        type: [String, Boolean],
         default: true
       },
       /* eslint-disable */
@@ -1277,6 +1277,7 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
         localAttributes: {},
         internalModelProxy: this.formulateValue,
         behavioralErrorVisibility: (this.errorBehavior === 'live'),
+        formShouldShowErrors: false,
         validationErrors: [],
         pendingValidation: Promise.resolve()
       }
@@ -1578,7 +1579,8 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
     data: function data () {
       return {
         registry: {},
-        internalFormModelProxy: {}
+        internalFormModelProxy: {},
+        formShouldShowErrors: false
       }
     },
     computed: {
@@ -1638,8 +1640,14 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
       },
       formSubmitted: function formSubmitted () {
         // perform validation here
+        this.showErrors();
         this.$emit('submit', this.formModel);
       },
+      showErrors: function showErrors () {
+        for (var fieldName in this.registry) {
+          this.registry[fieldName].formShouldShowErrors = true;
+        }
+      },
       getFormValues: function getFormValues () {
         return this.internalFormModelProxy
       }

dist/formulate.umd.js

@@ -1053,8 +1053,8 @@
    * @return {boolean}
    */
   function showFieldErrors () {
-    if (this.showErrors) {
-      return this.showErrors
+    if (this.showErrors || this.formShouldShowErrors) {
+      return true
     }
     return this.behavioralErrorVisibility
   }
@@ -1184,7 +1184,7 @@
         default: 'text'
       },
       name: {
-        type: [Boolean, String],
+        type: [String, Boolean],
         default: true
       },
       /* eslint-disable */
@@ -1280,6 +1280,7 @@
         localAttributes: {},
         internalModelProxy: this.formulateValue,
         behavioralErrorVisibility: (this.errorBehavior === 'live'),
+        formShouldShowErrors: false,
         validationErrors: [],
         pendingValidation: Promise.resolve()
       }
@@ -1581,7 +1582,8 @@
     data: function data () {
       return {
         registry: {},
-        internalFormModelProxy: {}
+        internalFormModelProxy: {},
+        formShouldShowErrors: false
       }
     },
     computed: {
@@ -1641,8 +1643,14 @@
       },
       formSubmitted: function formSubmitted () {
         // perform validation here
+        this.showErrors();
         this.$emit('submit', this.formModel);
       },
+      showErrors: function showErrors () {
+        for (var fieldName in this.registry) {
+          this.registry[fieldName].formShouldShowErrors = true;
+        }
+      },
       getFormValues: function getFormValues () {
         return this.internalFormModelProxy
       }

dist/snow.css

@@ -150,12 +150,17 @@
     min-width: 0;
     width: auto;
     font-weight: bold;
-    cursor: pointer; }
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center; }
     .formulate-input[data-classification='button'] button::placeholder {
       color: #a8a8a8; }
     .formulate-input[data-classification='button'] button:focus {
       outline: 0;
       border: 1px solid #41b883; }
+    .formulate-input[data-classification='button'] button[disabled] {
+      background-color: #cecece;
+      border-color: #cecece; }
     .formulate-input[data-classification='button'] button:active {
       background-color: #64c89b;
       border-color: #64c89b; }

src/FormulateForm.vue

@@ -35,7 +35,8 @@ export default {
   data () {
     return {
       registry: {},
-      internalFormModelProxy: {}
+      internalFormModelProxy: {},
+      formShouldShowErrors: false
     }
   },
   computed: {
@@ -93,8 +94,14 @@ export default {
     },
     formSubmitted () {
       // perform validation here
+      this.showErrors()
       this.$emit('submit', this.formModel)
     },
+    showErrors () {
+      for (const fieldName in this.registry) {
+        this.registry[fieldName].formShouldShowErrors = true
+      }
+    },
     getFormValues () {
       return this.internalFormModelProxy
     }

src/FormulateInput.vue

@@ -76,7 +76,7 @@ export default {
       default: 'text'
     },
     name: {
-      type: [Boolean, String],
+      type: [String, Boolean],
       default: true
     },
     /* eslint-disable */
@@ -172,6 +172,7 @@ export default {
       localAttributes: {},
       internalModelProxy: this.formulateValue,
       behavioralErrorVisibility: (this.errorBehavior === 'live'),
+      formShouldShowErrors: false,
       validationErrors: [],
       pendingValidation: Promise.resolve()
     }

src/libs/context.js

@@ -116,8 +116,8 @@ function mergedValidationName () {
  * @return {boolean}
  */
 function showFieldErrors () {
-  if (this.showErrors) {
-    return this.showErrors
+  if (this.showErrors || this.formShouldShowErrors) {
+    return true
   }
   return this.behavioralErrorVisibility
 }