Disable form until valid.

bikeshop_project/registration/templates/edit_member_form.html

@@ -4,7 +4,8 @@
 {% block scripts %}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
     <script>
-    dateOfBirthInput = document.getElementById('{{ form.date_of_birth.id_for_label }}');
+    var dateOfBirthInput = document.getElementById('{{ form.date_of_birth.id_for_label }}');
+    var submitButton = document.getElementById('submit');
 
     dateOfBirthInput.addEventListener('blur', function(event) {
         var input = event.target;
@@ -23,6 +24,16 @@
         }
     });
 
+    var form = document.getElementsByTagName('form')[0];
+    var inputs = Array.prototype.slice.call(document.getElementsByTagName('input'));
+    var textAreas = Array.prototype.slice.call(document.getElementsByTagName('textarea'));
+
+    for (var el of inputs.concat(textAreas)) {
+      el.addEventListener('change', function() {
+        submitButton.disabled = !form.checkValidity()
+      })
+    }
+
     </script>
 {% endblock %}
 
@@ -220,7 +231,7 @@
         </div>
         <div class="mdl-grid">
             <div class="mdl-cell">
-                <button id="submit" type="submit"
+                <button disabled id="submit" type="submit"
                         class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
                     Save</button>
             </div>

bikeshop_project/registration/templates/member_form.html

@@ -25,6 +25,15 @@
 
     var waiverCheckBox = document.getElementById('{{ form.waiver_substitute.id_for_label }}');
     var submitButton = document.getElementById('submit');
+    var form = document.getElementsByTagName('form')[0];
+    var inputs = Array.prototype.slice.call(document.getElementsByTagName('input'));
+
+    for (var anInput of inputs) {
+      anInput.addEventListener('change', function() {
+        submitButton.disabled = !form.checkValidity()
+      })
+    }
+
     var requiredCheckboxes = function() {
         return waiverCheckBox.checked;
     };