Changeset - 674261e0f0c2
[Not reviewed]
0 2 0
Bradley Kuhn (bkuhn) - 9 years ago 2014-12-05 15:07:27
bkuhn@ebb.org
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.
2 files changed with 9 insertions and 2 deletions:
0 comments (0 inline, 0 general)
www/conservancy/static/supporter-page.js
Show inline comments
...
 
@@ -43,13 +43,20 @@ $(document).ready(function() {
 
            noShippingSelector.val("2");
 
        } else {
 
            tShirtSelector.hide();
 
            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();
 
        var errorElement=$("span#error", input.parent());
 
        var noCommaValue = value;
 
        noCommaValue = value.replace(/,/g, "");
www/conservancy/static/supporter/index.html
Show inline comments
...
 
@@ -139,13 +139,13 @@ internal policies</a> are published and available for scrutiny.</p>
 
            <input type="hidden" name="cmd" value="_xclick" />
 
            <input type="hidden" name="business" value="supporter@sfconservancy.org" />
 
            <input type="hidden" name="item_name" value="Conservancy Supporter, Annual" />
 
            <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>
 
                      <input type="hidden" name="on1" value="wantGift" />
 
                      <input type="radio" name="os1" value="Yes" />Yes
 
                      <input type="radio" checked="checked" name="os1" value="No" />No
...
 
@@ -206,13 +206,13 @@ internal policies</a> are published and available for scrutiny.</p>
 
            <input type="hidden" name="p3" value="1" />
 
            <input type="hidden" name="src" value="1" />
 
            <input type="hidden" name="srt" value="0" />
 
            <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" />
 
                      <input type="radio" name="os1" value="Yes" />Yes
 
                      <input type="radio" checked="checked" name="os1" value="No" />No
 
                      <br />
0 comments (0 inline, 0 general)