Conservancy/website
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Start errors in shown state for non-Javascript.

Browse source 
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.
This commit is contained in:
Bradley M. Kuhn 2014-12-05 10:07:27 -05:00
parent 0b57b1162d
commit 674261e0f0
2 changed files with 9 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
www/conservancy/static/supporter-page.js
View file

@ -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();

4
www/conservancy/static/supporter/index.html
View file

@ -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" />