diff --git a/js/components/date_selector.js b/js/components/date_selector.js
index e5e48128..be6a8c89 100644
--- a/js/components/date_selector.js
+++ b/js/components/date_selector.js
@@ -62,18 +62,23 @@ export default {
 
     isMonthValid: function() {
       var _month = parseInt(this.month)
-
-      return _month >= 0 && _month <= 12
+      var valid = _month >= 0 && _month <= 12
+      this._emitChange('month', this.month, valid)
+      return valid
     },
 
     isDayValid: function() {
       var _day = parseInt(this.day)
-
-      return _day >= 0 && _day <= this.daysMaxCalculation
+      var valid = _day >= 0 && _day <= this.daysMaxCalculation
+      this._emitChange('day', this.day, valid)
+      return valid
     },
 
     isYearValid: function() {
-      return parseInt(this.year) >= 1
+      // Emit a change event
+      var valid = parseInt(this.year) >= 1
+      this._emitChange('year', this.year, valid)
+      return valid
     },
 
     isWithinDateRange: function() {
@@ -128,6 +133,12 @@ export default {
     },
   },
 
+  methods: {
+    _emitChange: function(name, value, valid) {
+      this.$root.$emit('field-change', { value, valid, name })
+    },
+  },
+
   render: function(createElement) {
     return createElement('p', 'Please implement inline-template')
   },
diff --git a/templates/fragments/edit_user_form.html b/templates/fragments/edit_user_form.html
index fe821b65..436d5218 100644
--- a/templates/fragments/edit_user_form.html
+++ b/templates/fragments/edit_user_form.html
@@ -4,37 +4,41 @@
 {% from "components/phone_input.html" import PhoneInput %}
 {% from "components/date_picker.html" import DatePicker %}
 
-<form method="POST" action='{{ form_action }}'>
-  {{ form.csrf_token }}
-  <div class='panel'>
-    <div class='panel__content'>
-      <div class='form-row'>
-        <div class='form-col form-col--half'>
-          {{ TextInput(form.first_name, validation='requiredField') }}
+<base-form inline-template>
+  <form method="POST" action='{{ form_action }}'>
+    {{ form.csrf_token }}
+    <div class='panel'>
+      <div class='panel__content'>
+        <div class='form-row'>
+          <div class='form-col form-col--half'>
+            {{ TextInput(form.first_name, validation='requiredField') }}
+          </div>
+
+          <div class='form-col form-col--half'>
+            {{ TextInput(form.last_name, validation='requiredField') }}
+          </div>
         </div>
 
-        <div class='form-col form-col--half'>
-          {{ TextInput(form.last_name, validation='requiredField') }}
+        {{ TextInput(form.email, validation='email') }}
+        {{ PhoneInput(form.phone_number, form.phone_ext) }}
+
+        {{ OptionsInput(form.service_branch) }}
+        {{ OptionsInput(form.citizenship) }}
+        {{ OptionsInput(form.designation) }}
+
+
+        <div class="usa-input">
+          {{ DatePicker(form.date_latest_training, mindate=mindate, maxdate=maxdate) }}
         </div>
       </div>
-
-      {{ TextInput(form.email, validation='email') }}
-      {{ PhoneInput(form.phone_number, form.phone_ext) }}
-
-      {{ OptionsInput(form.service_branch) }}
-      {{ OptionsInput(form.citizenship) }}
-      {{ OptionsInput(form.designation) }}
-
-
-      <div class="usa-input">
-        {{ DatePicker(form.date_latest_training, mindate=mindate, maxdate=maxdate) }}
-      </div>
     </div>
-  </div>
 
-  <div class='action-group'>
-    <button class='usa-button usa-button-big' type='submit'>
-      {{ "fragments.edit_user_form.save_details_button" | translate }}
-    </button>
-  </div>
-</form>
+    <div class='action-group'>
+      <savebutton
+        text='{{ "fragments.edit_user_form.save_details_button" | translate }}'
+        classes="usa-button-big"
+        :disabled="disabled">
+      </savebutton>
+    </div>
+  </form>
+</base-form>