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
+      }
     }
   }
 }

templates/fragments/edit_project_form.html

@@ -47,6 +47,9 @@
         {{ Alert(error, level="error") }}
       {% endfor %}
     {% endif %}
+    <div v-if="showError">
+      {{ Alert("Provide at least one environment name.", level="error") }}
+    </div>
 
       <div class="block-list project-list-item">
         <header class="block-list__header block-list__header--grow">
@@ -76,7 +79,7 @@
 
 
       <div class="action-group">
-        <button v-on:click="openModal('{{ modalName }}')" class="usa-button usa-button-primary" tabindex="0" type="button">{{ action_text }} Project</button>
+        <button v-on:click="validateAndOpenModal('{{ modalName }}')" class="usa-button usa-button-primary" tabindex="0" type="button">{{ action_text }} Project</button>
       </div>
 
     </div>