website Changeset - ba0df40639d9 · Conservancy Kallithea

Changeset - ba0df40639d9

Parent rev.

Child rev.

[Not reviewed]

0 1 0

Brett Smith (brett) - 7 years ago 2017-01-01 21:03:03
brett@sfconservancy.org

supporter: Improve amount validation JavaScript.

* Check validity on page load and store it in a data attribute so we can
change validity state more accurately.
* Clear invalid state on any change.

1 file changed with 24 insertions and 11 deletions:

www/conservancy/static/js/supporter-page.js

0 comments (0 inline, 0 general)

www/conservancy/static/js/supporter-page.js

➞

Show inline comments

@@ ... / @@ -2,71 +2,84 @@ @@
 ** Copyright (C) 2013-2014 Bradley M. Kuhn,
 ** Copyright (C) 2016 Brett Smith.
 ** License: GPLv3-or-later
 **  Find a copy of GPL at https://sfconservancy.org/GPLv3
 */
 var flipClass = function(elem, byeClass, hiClass) {
     var classList = elem.classList;
     classList.remove(byeClass);
     classList.add(hiClass);
+}
-var amountIsValid = function(amountInput) {
+var checkAmountValid = function(amountInput) {
     var value = parseFloat(amountInput.value);
     var min = parseFloat(amountInput.min);
     /* Is the value is a valid float, it will stringify back to itself. */
     return (String(value) === amountInput.value) && (value >= min);
     var isValid = (String(value) === amountInput.value) && (value >= min);
     amountInput.dataset.valid = isValid ? '1' : '0';
     return isValid;
+}
 var supportTypeSelector = function(supportTypeHash) {
     return $(supportTypeHash + "Selector");
 };
 var $window = $(window);
 $window.load(function() {
     /* We've sometimes published links that say #renew instead of #renewal.
        Rewrite that to work as intended. */
     if (window.location.hash === "#renew") {
         window.location.hash = "#renewal";
+    }
     var $selectorLink = supportTypeSelector(window.location.hash);
     if ($selectorLink.length > 0) {
         $window.scrollTop($selectorLink.offset().top);
+    }
 });
 $(document).ready(function() {
     // Forms start in "invalid" form, with the errors shown, so that
     // non-Javascript users see the errors by default and know what they must
     // enter.  Now we hide those for JavaScript users:
     $('.form-error').addClass('hidden');
     var $formCorrectionNeeded = $('#form-correction-needed');
     $formCorrectionNeeded.addClass('hidden');
     $('form.supporter-form input[type=number]').on('focusout', function(event) {
     $('form.supporter-form input[type=number]').on('input', function(event) {
         event.target.classList.remove('invalid');
     }).on('focusout', function(event) {
         var amountInput = event.target;
         var wasValid = !amountInput.classList.contains('invalid');
         var isValid = amountIsValid(amountInput);
         if (!wasValid && isValid) {
         var wasValid = amountInput.dataset.valid === '1';
         var isValid = checkAmountValid(amountInput);
         if (isValid) {
             flipClass(amountInput, 'invalid', 'valid');
             $('.form-error', amountInput.parentNode).addClass('hidden');
         } else if (wasValid && !isValid) {
             if (!wasValid) {
                 $('.form-error', amountInput.parentNode).fadeOut();
+            }
         } else if (wasValid) {
             flipClass(amountInput, 'valid', 'invalid');
             $('.form-error', amountInput.parentNode).removeClass('hidden');
             $('.form-error', amountInput.parentNode).fadeIn();
+        }
     }).each(function(index, elem) {
         if (checkAmountValid(elem)) {
             $('.form-error', elem.parentNode).addClass('hidden');
         } else {
             elem.classList.add('invalid');
             $('.form-error', elem.parentNode).removeClass('hidden');
+        }
     });
     $('form.supporter-form').on('submit', function(event) {
-        if (amountIsValid($('input[name=amount]', event.target)[0])) {
+        if (checkAmountValid($('input[name=amount]', event.target)[0])) {
             $formCorrectionNeeded.addClass('hidden');
         } else {
             $formCorrectionNeeded.removeClass('hidden')
                 .css("font-weight", "bold").css("font-size", "150%");
             event.preventDefault();
+        }
     });
     var selectSupportType = function(event) {
         var $selectedLink = $(event.target);
         $(".supporter-type-selector a").removeClass("supporter-type-selector-selected");
         $selectedLink.addClass("supporter-type-selector-selected");

0 comments (0 inline, 0 general)