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()
+      }
+    },
   },
 }

templates/fragments/applications/edit_environments.html

@@ -108,7 +108,7 @@
             {% call ToggleSection(section_name="edit") %}
               <ul>
                 <li class="accordion-table__item__expanded">
-                  <form action="{{ url_for('applications.update_environment', environment_id=env['id'], fragment='application-environments', _anchor='application-environments') }}" method="post">
+                  <form action="{{ url_for('applications.update_environment', environment_id=env['id']) }}" method="post" v-on:submit="handleSubmit">
                     {{ edit_form.csrf_token }}
                     {{ TextInput(edit_form.name, validation='requiredField') }}
                     {{