Prevent submitting the form if invalid

js/components/toggler.js

@@ -17,10 +17,37 @@ export default {
   data: function() {
     return {
       selectedSection: this.initialSelectedSection,
+      invalid: true,
+      fields: {},
     }
   },
 
+  created: function() {
+    this.$root.$on('field-mount', this.handleFieldMount)
+  },
+
+  mounted: function() {
+    this.$root.$on('field-change', this.handleChange)
+  },
+
   methods: {
+    handleFieldMount: function(event) {
+      const { name, optional } = event
+      this.fields[name] = optional
+    },
+
+    handleChange: function(event) {
+      const { name, valid, parent_uid } = event
+      this.fields[name] = valid
+      this.validateForm()
+    },
+
+    validateForm: function() {
+      const valid = !Object.values(this.fields).some(field => field === false)
+      this.invalid = !valid
+      return valid
+    },
+
     toggleSection: function(sectionName) {
       if (this.selectedSection === sectionName) {
         this.selectedSection = null
@@ -28,5 +55,11 @@ export default {
         this.selectedSection = sectionName
       }
     },
+
+    handleSubmit: function(event) {
+      if (this.invalid) {
+        event.preventDefault()
+      }
+    },
   },
 }