website Changeset - 090fb9f268a0 · Conservancy Kallithea

Changeset - 090fb9f268a0

Parent rev.

Child rev.

[Not reviewed]

0 2 0

Bradley Kuhn (bkuhn) - 9 years ago 2014-12-02 22:26:55
bkuhn@ebb.org

Larger error message when submitting bad amount.

This addition to the Javascript and text ensures a clear message to the
user of a Javascript-enabled browser that there is an issue with the
amount. Also, it prevents submission of the form until the amount is
correct.

A user with Javascript disabled can circumvent these validation steps;
however, the worst-case scenario is that they make a donation for less
than $120 that is categorized in Conservancy's internal system as a
Supporter donation, and we'll be adding internal checks to find that.

2 files changed with 12 insertions and 0 deletions:

www/conservancy/static/supporter-page.js

www/conservancy/static/supporter/index.html

0 comments (0 inline, 0 general)

www/conservancy/static/supporter-page.js

➞

Show inline comments

@@ ... / @@ -22,54 +22,65 @@ $(document).ready(function() { @@
         } else {
             $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 noCommaValue = value;
         noCommaValue = value.replace(/,/g, "");
         var re = /^((\d{1,3}(,?\d{3})*?(\.\d{0,2})?)|\d+(\.\d{0,2})?)$/;
         var isValid = ( re.test(value) && parseInt(noCommaValue) >= 120);
         if (isValid)  {
            input.removeClass("invalid").addClass("valid");
            errorElement.removeClass("form-error-show").addClass("form-error");
            $("#form-correction-needed").removeClass("form-error-show").addClass("form-error");
+        }
         else {
             input.removeClass("valid").addClass("invalid");
             errorElement.removeClass("form-error").addClass("form-error-show");
+        }
     });
     $("#supporter-form-submit").click(function(event){
 	var valid = $('#amount').hasClass("valid");
         if (! valid) {
             $("#form-correction-needed").removeClass("form-error").addClass("form-error-show")
                                         .css("font-weight", "bold").css("font-size", "150%");
 	    event.preventDefault();
         } else {
             $("#form-correction-needed").removeClass("form-error-show").addClass("form-error");
+        }
     });
     /* Handle toggling of annual/monthly form selections */
     $('.supporter-type-selection#monthly').hide();
     $('#annualSelector').css("font-weight", "bold").css("font-size", "127%");
     $("a[href$='monthly']").bind('click', function() {
         $('.supporter-type-selection#annual').hide();
         $('.supporter-type-selection#monthly').show();
         $('#monthlySelector').css("font-weight", "bold").css("font-size", "127%");
         $('#annualSelector').css("font-weight", "normal").css("font-size", "125%");
     });
     $("a[href$='annual']").bind('click', function() {
         $('.supporter-type-selection#annual').show();
         $('.supporter-type-selection#monthly').hide();
         $('#annualSelector').css("font-weight", "bold").css("font-size", "127%");
         $('#monthlySelector').css("font-weight", "normal").css("font-size", "125%");
     });
   });
 $(window).load(function () {
     verifySelctionCorrectOnPageLoad = function() {
         var ourURL = document.URL;
         if (ourURL.search("#monthly") > 0) {
             $('.supporter-type-selection#annual').hide();

www/conservancy/static/supporter/index.html

➞

Show inline comments

@@ ... @@
                         <option name="os3" id="os3" value="LadiesL">Ladies' L</option>
                          <option name="os3" id="os3" value="LadiesXL">Ladies' XL</option>
                       </select><br/>
                       <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/>
                       <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 /></div>
                       <div id="supporter-form-submit">
                       <input type="image"
                       src="/img/supporter-payment-button-monthly.png"
                       height="81" width="188"
                       border="0" name="submit" alt="Become a Monthly Supporter Now!">
 <br/><br/><small>Button above redirects to PayPal's site for credit
         card, bank account or PayPal balance payment methods.  Select
                       options to the right first.</small>
                       </div>
 </form>
 <span id="form-correction-needed" class="form-error">Please ensure all form data above is correct.</span>
 </div>
 </div>
 {% endblock %}

0 comments (0 inline, 0 general)