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

Rework form with error messages & basic validation

Browse source 
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.
This commit is contained in:
Bradley M. Kuhn 2014-12-02 11:31:43 -05:00
parent 01eb8c80c8
commit 9bfb5e10de
3 changed files with 61 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
www/conservancy/static/forms.css Normal file
View file

@ -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;
}

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

@ -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");
}
});
});

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

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