website Changeset - 2d96daee903c · Conservancy Kallithea

Changeset - 2d96daee903c

Parent rev.

Child rev.

[Not reviewed]

0 1 0

Bradley Kuhn (bkuhn) - 9 years ago 2014-12-04 01:44:15
bkuhn@ebb.org

Rework Javascript final form validation.

The problem before was that an error in the annual form would prevent
submission of the monthly form and vice-versa. That is herein corrected
with this change, which assures that the input with id of "amount" if
the specific form (id'd with "annual" or "monthly") is the only one
checked.

1 file changed with 14 insertions and 8 deletions:

www/conservancy/static/supporter-page.js

0 comments (0 inline, 0 general)

www/conservancy/static/supporter-page.js

➞

Show inline comments

@@ ... / @@ -19,105 +19,111 @@ $(document).ready(function() { @@
         // if control has HTML5 data attributes, use to update text
         if ($parent.hasClass('expanded')) {
             $control.html($control.attr('data-expanded-text'));
         } 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");
     });
     $(".t-shirt-size-selector").hide();
     $('input[name=os1]:radio').change(function() {
         var input=$(this);
         var value = input.val();
         if (value == "Yes") {
             $(".t-shirt-size-selector").show();
             $("#no_shipping").val("2");
         } else {
             $(".t-shirt-size-selector").hide();
             $("#no_shipping").val("0");
+        }
     });
     $('*#amount').addClass("valid");
     $('*#amount').on('input', function() {
         var input=$(this);
         var value = input.val();
         var errorElement=$("span#error", 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) >= parseInt(input.attr("minimum")));
         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")
     var validateFormAtSubmission = function(element, event) {
             var valid = element.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");
+        }
 	        event.preventDefault();
             } else {
                 $("#form-correction-needed").removeClass("form-error-show").addClass("form-error");
+            }
     };
     $(".supporter-form-submit#monthly").click(function (event) {
         validateFormAtSubmission($(".supporter-form#monthly input#amount"), event);
     });
     $(".supporter-form-submit#annual").click(function (event) {
         validateFormAtSubmission($(".supporter-form#annual input#amount"), event);
     });
     /* 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%");
         $("#form-correction-needed").removeClass("form-error-show").addClass("form-error");
     });
     $("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%");
     });
     $( ".footnote-mark" ).tooltip({
         items: "a",
         hide: { duration: 5000 },
         position: {
             my: "center bottom-20",
             at: "center left",
             using: function( position, feedback ) {
                 $( this ).css( position );
                 $( "<div>" )
                     .addClass( "arrow" )
                     .addClass( feedback.vertical )
                     .addClass( feedback.horizontal )
                     .appendTo( this );
+            }
         },
         content: function() {
             return $('.footnote-1-text').text();
+        }
     });
 });
 $(window).load(function () {
     verifySelctionCorrectOnPageLoad = function() {
         var ourURL = document.URL;
         if (ourURL.search("#monthly") > 0) {
             $('.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%");
+        }

0 comments (0 inline, 0 general)