From 674261e0f0c2af468dae7e242e4d09a90ef86a5a 2014-12-05 15:07:27
From: Bradley M. Kuhn <bkuhn@ebb.org>
Date: 2014-12-05 15:07:27
Subject: [PATCH] Start errors in shown state for non-Javascript.

Since the error messages have important information, and since the
Javascript code is the only "enforcer" of the minimum donation, the
errors really should be displayed by default if the browser is not
Javascript-capable.  This change does that, but also toggles the state
back so that errors are not shown until needed in Javascript-capable
browsers.

I believe this still fits graceful degradation, since browsers without
Javascript and CSS were already showing the errors anyway, so now the
only real change is that everyone sees the errors by default.

It *might* make sense to not show the errors in red in non-Javascript
browsers (i.e., make the default CSS color black for the form-error-show
class, and then change it to red in the Javascript).  I didn't make that
so, because it's not clear to me that's right, and we *do* want to draw
attention to the errors lest people become a supporter below the
minimum (which has happened once already -- that precipitated this
change).

I'm still annoyed that PayPal doesn't provide a "minimum but no maximum"
variable donation box of its own, which would solve this problem
outright.

---

diff --git a/www/conservancy/static/supporter-page.js b/www/conservancy/static/supporter-page.js
index ca9e4bb08a7afff163b0a8a9a73863df58756ba7..91af8549454323e2b46bb35b582cb3b2934c43d1 100644
--- a/www/conservancy/static/supporter-page.js
+++ b/www/conservancy/static/supporter-page.js
@@ -46,7 +46,14 @@ $(document).ready(function() {
             noShippingSelector.val("0");
         }
     });
+
+    // Forms start in "invalid" form, with the errors shown, so that
+    // non-Javascript users see the errors by default and know what they must
+    // enter.  The following two lines correct that.
     $('*#amount').addClass("valid");
+    $('.supporter-form-inputs .form-error-show')
+        .removeClass('form-error-show').addClass('form-error');
+
     $('*#amount').on('input', function() {
         var input=$(this);
         var value = input.val();
diff --git a/www/conservancy/static/supporter/index.html b/www/conservancy/static/supporter/index.html
index 332fcf9bcae89de9a8f0bab42cb949655898adc1..28a967397fd1a2815a200a6d4940fce37488a11b 100644
--- a/www/conservancy/static/supporter/index.html
+++ b/www/conservancy/static/supporter/index.html
@@ -142,7 +142,7 @@ internal policies</a> are published and available for scrutiny.</p>
             <input id="no_shipping" type="hidden" name="no_shipping" value="0" />
   <label for="amount"><strong>Amount:</strong> $</label>
   <input id="amount" type="text" name="amount" size="7" minimum="120" value="120" />
-  <span id="error" class="form-error">$120 is a minimum for Conservancy
+  <span id="error" class="form-error-show">$120 is a minimum for Conservancy
   Supporters.  <a href="/donate">Donate smaller amounts here</a>.</span><br/>
 
                       <label for="wantGift"><strong>Do you want to receive a t-shirt? </strong></label>
@@ -209,7 +209,7 @@ internal policies</a> are published and available for scrutiny.</p>
             <input type="hidden" name="item_name" value="Conservancy Supporter, Monthly" />
   <label for="amount"><strong>Monthly Amount:</strong> $</label>
   <input id="amount" type="text" name="a3" size="5" minimum="10" value="10" />
-  <span id="error" class="form-error">$10/month is a minimum for Conservancy
+  <span id="error" class="form-error-show">$10/month is a minimum for Conservancy
   Supporters.  <a href="/donate">Donate smaller amounts here</a>.</span><br/>
                       <label for="wantGift"><strong>Do you want to receive a t-shirt? </strong></label>
                       <input type="hidden" name="on1" value="wantGift" />