From 989f9ffb854efcd7cf651e49b87c9dc348616dbe Mon Sep 17 00:00:00 2001
From: Drew Larson <drew@drwlrsn.com>
Date: Mon, 1 May 2017 19:35:03 -0600
Subject: [PATCH] Disable form until valid. (#42)

---
 .../registration/templates/edit_member_form.html  | 15 +++++++++++++--
 .../registration/templates/member_form.html       |  9 +++++++++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/bikeshop_project/registration/templates/edit_member_form.html b/bikeshop_project/registration/templates/edit_member_form.html
index 61064b1..50d2bc1 100644
--- a/bikeshop_project/registration/templates/edit_member_form.html
+++ b/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>
diff --git a/bikeshop_project/registration/templates/member_form.html b/bikeshop_project/registration/templates/member_form.html
index ffa6436..f04f595 100644
--- a/bikeshop_project/registration/templates/member_form.html
+++ b/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;
     };