Changeset - 9bfb5e10dec2
[Not reviewed]
0 2 1
Bradley Kuhn (bkuhn) - 8 years ago 2014-12-02 16:31:43
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.
3 files changed with 61 insertions and 7 deletions:
0 comments (0 inline, 0 general)
Show inline comments
new file 100644
#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;
Show inline comments
@@ -32,4 +32,21 @@ $(document).ready(function() {
    $('#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)  {
        else {

Show inline comments
@@ -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="" method="post" name="supporter">
            <input type="hidden" name="cmd" value="_xclick" />
            <input type="hidden" name="business" value="" />
            <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>
  <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>
                      <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>
0 comments (0 inline, 0 general)