website Changeset - 9bfb5e10dec2 · Conservancy Kallithea

Changeset - 9bfb5e10dec2

Parent rev.

Child rev.

[Not reviewed]

0 2 1

Bradley Kuhn (bkuhn) - 9 years ago 2014-12-02 16:31:43
bkuhn@ebb.org

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:

www/conservancy/static/forms.css

www/conservancy/static/supporter-page.js

www/conservancy/static/supporter/index.html

0 comments (0 inline, 0 general)

www/conservancy/static/forms.css

➞

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

www/conservancy/static/supporter-page.js

➞

Show inline comments

@@ ... / @@ -23,13 +23,30 @@ $(document).ready(function() { @@
             $control.html($control.attr('data-text'));
+        }
     });
     $('a.donate-now')
       .addClass('clickable')
       .bind('click', function() {
         var $control = $('#donate-box');
         $control.toggleClass('expanded');
         $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");
+        }
   });
   });

www/conservancy/static/supporter/index.html

➞

Show inline comments

 {% extends "base_conservancy.html" %}
 {% block subtitle %}Support Conservancy - {% endblock %}
 {% block category %}supporter{% endblock %}
 {% 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>
 </script>
 {% endblock %}
 {% block content %}
 <div style="position:fixed;top:180px;right:2%;width:18%">
 <table style="background-color:#afe478;width:100%;">
 <tr><td style="text-align:center;padding:10px;padding-bottom:10px;">
@@ ... / @@ -114,53 +115,57 @@ our @@
 href="https://gitorious.org/conservancy/policies/source/master:">
 internal policies</a> are published and available for scrutiny.</p>
 <p>Please <a href="#donate-box" class="donate-now">join our Supporter program</a> and spread software freedom!</p>
 [1] the shirts will ship First Quarter 2015.
 <h2>Become a Supporter Now!</h2>
 <a id="now"></a>
 <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>
                         <option name="os3" id="os3" value="MenM" />Men's M</option>
                         <option name="os3" id="os3" value="MenL" />Men's L</option>
                         <option name="os3" id="os3" value="MenXL" />Men's XL</option>
                         <option name="os3" id="os3" value="Men2XL" />Men's 2XL</option>
                         <option name="os3" id="os3" value="LadiesS" />Ladies' S</option>
                         <option name="os3" id="os3" value="LadiesM" />Ladies' M</option>
                         <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>
                       <br />
                       <input type="image"
                              src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif"
                              border="0" name="submit" alt="Become a Supporter Now!">
                       <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
                     </form>
                       <small>You will be redirected to the Paypal website to
                       become a supporter when you click &ldquo;Donate&rdquo;.</small>

0 comments (0 inline, 0 general)