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
       }
 

styles/components/_modal.scss

@@ -203,6 +203,11 @@ body {
 
     .usa-button {
       margin-left: 2rem;
+
+      &[type='button']:disabled {
+        background-color: $color-gray-lighter;
+        opacity: inherit;
+      }
     }
 
     .modal__form--padded {

templates/portfolios/admin.html

@@ -92,7 +92,12 @@
         </div>
       </div>
       <div class='action-group'>
-        <a v-on:click="next()" class='action-group__action usa-button'>Next Step</a>
+        <input
+            type='button'
+            v-on:click="next()"
+            v-bind:disabled="invalid"
+            class='action-group__action usa-button'
+            value='Next Step'>
         <a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
       </div>
     {% endset %}