prevent premature modal form submission with enter click

js/components/forms/multi_step_modal_form.js

@@ -18,7 +18,9 @@ export default {
     optionsinput,
   },
 
-  props: {},
+  props: {
+    steps: Number,
+  },
 
   data: function() {
     return {
@@ -65,6 +67,15 @@ export default {
     handleModalOpen: function(_bool) {
       this.step = 0
     },
+    _onLastPage: function() {
+      return this.step === this.steps - 1
+    },
+    handleSubmit: function(e) {
+      if (this.invalid || !this._onLastPage()) {
+        e.preventDefault()
+        this.next()
+      }
+    },
   },
 
   computed: {},

templates/components/multi_step_modal_form.html

@@ -27,14 +27,14 @@
 
 {% macro MultiStepModalForm(name, form, form_action, steps, button_text="", dismissable=False) -%}
   {% set step_count = steps|length %}
-  <multi-step-modal-form inline-template>
+  <multi-step-modal-form inline-template :steps={{ step_count }}>
     <div>
       <a class='icon-link modal-link' v-on:click="openModal('{{ name }}')">
         {{ button_text }}
         {{ Icon('plus-circle-solid') }}
       </a>
         {% call Modal(name=name, dismissable=dismissable, classes="wide") %}
-          <form id="{{ name }}" action="{{ form_action }}" method="POST">
+          <form id="{{ name }}" action="{{ form_action }}" method="POST" v-on:submit="handleSubmit">
             {{ form.csrf_token }}
             <div v-if="activeModal === '{{ name }}'">
               {% for step in steps %}

templates/fragments/admin/add_new_portfolio_member.html

@@ -68,7 +68,6 @@
     <div class='action-group'>
       <input
         type="submit"
-        v-on:click="closeModal('{{ new_port_mem }}')"
         class='action-group__action usa-button'
         form="add-port-mem"
         value='Invite Member'>