new project Vue component is responsible for form validation

js/components/forms/new_project.js

@@ -32,6 +32,7 @@ export default {
     ).map(createEnvironment)
 
     return {
+      showError: false,
       environments,
       name,
     }
@@ -41,6 +42,12 @@ export default {
     this.$root.$on('onEnvironmentAdded', this.addEnvironment)
   },
 
+  updated: function() {
+    if (this.environmentsHaveNames()) {
+      this.showError = false
+    }
+  },
+
   methods: {
     addEnvironment: function (event) {
       this.environments.push(createEnvironment(""))
@@ -50,6 +57,29 @@ export default {
       if (this.environments.length > 1) {
         this.environments.splice(index, 1)
       }
+    },
+
+    environmentsHaveNames: function () {
+      return this.environments.every((e) => e.name !== "")
+    },
+
+    validateAndOpenModal: function (modalName) {
+      const textInputs = this.$children.reduce((previous, newVal) => {
+        // display textInput error if it is not valid
+        if (!newVal.showValid) {
+          newVal.showError = true
+        }
+
+        return newVal.showValid && previous
+      }, true)
+
+      const isValid = textInputs && this.environmentsHaveNames()
+
+      if (isValid) {
+        this.openModal(modalName)
+      } else {
+        this.showError = true
+      }
     }
   }
 }