cannot go to next new portfolio member page if form invalid

js/components/forms/multi_step_modal_form.js

@@ -24,6 +24,7 @@ export default {
     return {
       step: 0,
       fields: {},
+      invalid: true,
     }
   },
 
@@ -37,26 +38,29 @@ export default {
 
   methods: {
     next: function() {
-      if (this.isValid()) {
+      if (this._checkIsValid()) {
         this.step += 1
       }
     },
     goToStep: function(step) {
-      if (this.isValid()) {
+      if (this._checkIsValid()) {
         this.step = step
       }
     },
     handleValidChange: function(event) {
       const { name, valid } = event
       this.fields[name] = valid
+      this._checkIsValid()
     },
-    isValid: function() {
-      return !Object.values(this.fields).some(field => field === false)
+    _checkIsValid: function() {
+      const valid = !Object.values(this.fields).some(field => field === false)
+      this.invalid = !valid
+      return valid
     },
     handleFieldMount: function(event) {
       const { name, optional } = event
       this.fields[name] = optional
-    }
+    },
   },
 
   computed: {},

js/components/text_input.js

@@ -63,11 +63,13 @@ export default {
         this.value = conformToMask(this.value, mask).conformedValue
       }
     }
-
   },
 
   created: function() {
-    this.$root.$emit('field-mount', { name: this.name, optional: this.optional })
+    this.$root.$emit('field-mount', {
+      name: this.name,
+      optional: this.optional,
+    })
   },
 
   methods: {
@@ -88,7 +90,7 @@ export default {
     },
 
     onBlur: function(e) {
-      if (!(this.optional && e.target.value === "")) {
+      if (!(this.optional && e.target.value === '')) {
         this._checkIfValid({ value: e.target.value.trim(), invalidate: true })
       }
       this.value = e.target.value.trim()
@@ -105,7 +107,7 @@ export default {
 
       if (!this.modified && this.initialErrors && this.initialErrors.length) {
         valid = false
-      } else if (this.optional && value == "") {
+      } else if (this.optional && value == '') {
         valid = true
       }