diff --git a/js/components/forms/multi_step_modal_form.js b/js/components/forms/multi_step_modal_form.js
index 0fa2f0d0..780ed936 100644
--- a/js/components/forms/multi_step_modal_form.js
+++ b/js/components/forms/multi_step_modal_form.js
@@ -23,20 +23,40 @@ export default {
   data: function() {
     return {
       step: 0,
+      fields: {},
     }
   },
 
+  created: function() {
+    this.$root.$on('field-mount', this.handleFieldMount)
+  },
+
   mounted: function() {
-    return {}
+    this.$root.$on('field-change', this.handleValidChange)
   },
 
   methods: {
     next: function() {
-      this.step += 1
+      if (this.isValid()) {
+        this.step += 1
+      }
     },
     goToStep: function(step) {
-      this.step = step
+      if (this.isValid()) {
+        this.step = step
+      }
     },
+    handleValidChange: function(event) {
+      const { name, valid } = event
+      this.fields[name] = valid
+    },
+    isValid: function() {
+      return !Object.values(this.fields).some(field => field === false)
+    },
+    handleFieldMount: function(event) {
+      const { name, optional } = event
+      this.fields[name] = optional
+    }
   },
 
   computed: {},
diff --git a/js/components/text_input.js b/js/components/text_input.js
index bedc508c..28ac7c30 100644
--- a/js/components/text_input.js
+++ b/js/components/text_input.js
@@ -63,6 +63,11 @@ export default {
         this.value = conformToMask(this.value, mask).conformedValue
       }
     }
+
+  },
+
+  created: function() {
+    this.$root.$emit('field-mount', { name: this.name, optional: this.optional })
   },
 
   methods: {