From 9bfb5e10dec24c9e0d81cb996ee743d93a50e6c0 2014-12-02 16:31:43
From: Bradley M. Kuhn <bkuhn@ebb.org>
Date: 2014-12-02 16:31:43
Subject: [PATCH] Rework form with error messages & basic validation

Since PayPal cannot seem to be cajoled into verifying a minimum amount,
we have to do it here with Javascript.  This isn't perfect validation:
the form can currently still be submitted with an amount less than $120,
but at least this way Javascript-enabled browsers might prevent some
folks from doing that.

---

diff --git a/www/conservancy/static/forms.css b/www/conservancy/static/forms.css
new file mode 100644
index 0000000000000000000000000000000000000000..130d536a0623ad0e73585203551ec63eab3db1e6
--- /dev/null
+++ b/www/conservancy/static/forms.css
@@ -0,0 +1,32 @@
+#supporter-form label {
+    display: inline-block;
+    width: 200px;
+    text-align: right;
+}
+
+#supporter-form-submit {
+    padding-left: 100px;
+}
+
+#supporter-form div {
+    margin-top: 1em;
+}
+
+.form-error {
+    display: none;
+    margin-left: 10px;
+    color: green;
+}		
+
+.form-error-show {
+    color: red;
+    margin-left: 10px;
+}
+
+input.invalid, textarea.invalid {
+    border: 2px solid red;
+}
+
+input.valid, textarea.valid {
+    border: 2px solid green;
+}
diff --git a/www/conservancy/static/supporter-page.js b/www/conservancy/static/supporter-page.js
index 6741e7b557b4a6d18344abfb85a30cfa67c7cef4..f18a8306ff957b623827aa9681f60298c0fb22cf 100644
--- a/www/conservancy/static/supporter-page.js
+++ b/www/conservancy/static/supporter-page.js
@@ -32,4 +32,21 @@ $(document).ready(function() {
         $control.find('.toggle-content').slideUp("slow");
         $control.find('.toggle-content').slideDown("slow");
     });
+    $('#amount').on('input', function() {
+        var input=$(this);
+        var value = input.val();
+        var errorElement=$("span", input.parent());
+
+        var re = /^[0-9\.]+$/;
+        var isValid = (re.test(value) && parseInt(value) >= 120);
+        if (isValid)  {
+           input.removeClass("invalid").addClass("valid");
+           errorElement.removeClass("form-error-show").addClass("form-error");
+        }
+        else {
+            input.removeClass("valid").addClass("invalid");
+            errorElement.removeClass("form-error").addClass("form-error-show");
+        }
+  });
+
   });
diff --git a/www/conservancy/static/supporter/index.html b/www/conservancy/static/supporter/index.html
index 7e3a5351d9ef0317b5efb104759f2d1b9cf3ffba..6d325c99692f98b684d2b80f40bdde43666e7755 100644
--- a/www/conservancy/static/supporter/index.html
+++ b/www/conservancy/static/supporter/index.html
@@ -4,6 +4,7 @@
 
 {% block head %}
 <link href="/jquery-ui.css" rel="stylesheet" type="text/css"/>
+<link href="/forms.css" rel="stylesheet" type="text/css"/>
 <script type="text/javascript" src="/jquery.min.js"></script>
 <script type="text/javascript" src="/jquery-ui.min.js"></script>
 <script type="text/javascript" src="/supporter-page.js"></script>
@@ -123,17 +124,19 @@ internal policies</a> are published and available for scrutiny.</p>
 <form id="supporter-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" name="supporter">
             <input type="hidden" name="cmd" value="_xclick" />
             <input type="hidden" name="business" value="supporter@sfconservancy.org" />
-            <input type="hidden" id="min_amount" type="text" name="min_amount" value="120" />
             <input type="hidden" name="item_name" value="Conservancy Supporter, Annual" />
-                      <h5>Amount:</h5>$<input id="amount" type="text" name="amount" size="7" value="120" /><br/>
-                      <small>($120 minimum; increase the amount if you'd like to help us more.)</small>
+<div>
+  <label for="amount"><strong>Amount:</strong> $</label>
+  <input id="amount" type="text" name="amount" size="7" value="120" />
+  <span class="form-error"><small>$120 minimum to become a Conservancy Supporter.  Visit <a href="/donate">our regular donate page</a> if you'd like
+  to donate less than $120.</small></span><br/>
 
-                                            <h5>Do you want to receive a t-shirt?</h5>
+                      <label for="wantGift"><strong>Do you want to receive a t-shirt? </strong></label>
                       <input type="hidden" name="on1" value="wantGift" />
                       <input type="radio" checked="checked" name="os1" value="Yes" />Yes
                       <input type="radio" name="os1" value="No" />No
                       <br />
-                      <h5>T-shirt size:</h5>
+                      <label for="wantGift"><strong>T-shirt size: </strong></label>
                       <input type="hidden" name="on3" value="size"/>
                       <select name="os3" id="os3">
                         <option name="os3" id="os3" value="MenS" />Men's S</option>
@@ -146,12 +149,14 @@ internal policies</a> are published and available for scrutiny.</p>
                         <option name="os3" id="os3" value="LadiesL" />Ladies' L</option>
                          <option name="os3" id="os3" value="LadiesXL" />Ladies' XL</option>
                       </select><br/>
-                      <h5>Would you like to be acknowledged publicly as a Conservancy Supporter?</h5>
+                      <label for="publicAck"><strong>
+                          Should we list you publicly as a Conservancy Supporter? </strong></label>
                       <input type="hidden" name="on2" value="publicAck" />
                       <input type="radio" checked="checked" name="os2" value="Yes" />Yes
                       <input type="radio" name="os2" value="No" />No<br/>
             
-                                            <h5>Join Conservancy's Low-Traffic Announcement Email List?</h5>
+                      <label for="joinList"><strong>Join Conservancy's
+                      Low-Traffic Announcement Email List? </strong></label>
                       <input type="hidden" name="on4" value="joinList" />
                       <input type="radio" checked="checked" name="os4" value="Yes" />Yes
                       <input type="radio" name="os4" value="No" />No<br>