Changeset - 6392ae3a4313
[Not reviewed]
0 3 0
Brett Smith (brett) - 5 years ago 2017-01-01 15:24:34
brett@sfconservancy.org
supporter: Fix redundant amount, error ids.
3 files changed with 42 insertions and 57 deletions:
0 comments (0 inline, 0 general)
www/conservancy/static/css/forms.css
Show inline comments
...
 
@@ -34,12 +34,6 @@
 
}
 

	
 
.form-error {
 
    display: none;
 
    margin-left: 10px;
 
    color: green;
 
}		
 

	
 
.form-error-show {
 
    color: red;
 
    margin-left: 10px;
 
    font-size: 75%;
www/conservancy/static/js/supporter-page.js
Show inline comments
...
 
@@ -5,6 +5,19 @@
 
**  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 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 supportTypeSelector = function(supportTypeHash) {
 
    return $(".supporter-type-selector a[href=" + supportTypeHash + "]");
 
};
...
 
@@ -26,53 +39,31 @@ $window.load(function() {
 
$(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.  The following two lines correct that.
 
    $('*#amount').addClass("valid");
 
    $('.supporter-form-inputs .form-error-show')
 
        .removeClass('form-error-show').addClass('form-error');
 
    $('.dinner-form-inputs .form-error-show')
 
        .removeClass('form-error-show').addClass('form-error');
 
    // enter.  Now we hide those for JavaScript users:
 
    $('.form-error').addClass('hidden');
 
    var $formCorrectionNeeded = $('#form-correction-needed');
 

	
 
    $('*#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("min")));
 
        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");
 
    $('form.supporter-form input[type=number]').on('focusout', function(event) {
 
        var amountInput = event.target;
 
        var wasValid = !amountInput.classList.contains('invalid');
 
        var isValid = amountIsValid(amountInput);
 
        if (!wasValid && isValid) {
 
            flipClass(amountInput, 'invalid', 'valid');
 
            $('.form-error', amountInput.parentNode).addClass('hidden');
 
        } else if (wasValid && !isValid) {
 
            flipClass(amountInput, 'valid', 'invalid');
 
            $('.form-error', amountInput.parentNode).removeClass('hidden');
 
        }
 
    });
 
    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");
 
            }
 
    };
 
    $(".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);
 
    });
 
    $(".supporter-form-submit#renewal").click(function (event) {
 
        validateFormAtSubmission($(".supporter-form#renewal input#amount"), event);
 
    });
 
    $(".dinner-form-submit").click(function (event) {
 
        validateFormAtSubmission($(".dinner-form input#amount"), event);
 

	
 
    $('form.supporter-form').on('submit', function(event) {
 
        if (amountIsValid($('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) {
...
 
@@ -87,7 +78,7 @@ $(document).ready(function() {
 
                $element.hide();
 
            }
 
        });
 
        $("#form-correction-needed").removeClass("form-error-show").addClass("form-error");
 
        $formCorrectionNeeded.addClass('hidden');
 
        return false;
 
    };
 
    $(".supporter-type-selector a").bind("click", selectSupportType);
www/conservancy/templates/supporter/index.html
Show inline comments
...
 
@@ -71,8 +71,8 @@
 
            <input type="hidden" name="item_name" value="Conservancy Supporter, Annual" />
 
            <input type="hidden" name="no_shipping" value="0" />
 
  <label for="amount"><strong>Amount:</strong> $</label>
 
  <input id="amount" type="number" name="amount" size="7" min="{{ minimum_amount }}" value="{{ minimum_amount }}" />
 
  <span id="error" class="form-error-show">$120 is a minimum for Conservancy
 
  <input type="number" name="amount" size="7" min="{{ minimum_amount }}" value="{{ minimum_amount }}" />
 
  <span class="form-error">$120 is a minimum for Conservancy
 
  Supporters.  <a href="/donate">Donate smaller amounts here</a>.</span><br/>
 

	
 
                      <label for="wantGift"><strong>Do you want to receive a t-shirt? </strong></label>
...
 
@@ -140,8 +140,8 @@
 
            <input type="hidden" name="srt" value="0" />
 
            <input type="hidden" name="item_name" value="Conservancy Supporter, Monthly" />
 
  <label for="amount"><strong>Monthly Amount:</strong> $</label>
 
  <input id="amount" type="number" name="a3" size="5" min="10" value="10" />
 
  <span id="error" class="form-error-show">$10/month is a minimum for Conservancy
 
  <input type="number" name="a3" size="5" min="10" value="10" />
 
  <span class="form-error">$10/month is a minimum for Conservancy
 
  Supporters.  <a href="/donate">Donate smaller amounts here</a>.</span><br/>
 
                      <label for="wantGift"><strong>Do you want to receive a t-shirt? </strong></label>
 
                      <input type="radio" name="on0" value="wantGiftYes" />Yes
...
 
@@ -199,8 +199,8 @@
 
            <input type="hidden" name="item_name" value="Conservancy Supporter, Annual Renewal" />
 
            <input type="hidden" name="no_shipping" value="0" />
 
  <label for="amount"><strong>Amount:</strong> $</label>
 
  <input id="amount" type="number" name="amount" size="7" min="120" value="120" />
 
  <span id="error" class="form-error-show">$120 is a minimum for Conservancy
 
  <input type="number" name="amount" size="7" min="120" value="120" />
 
  <span class="form-error">$120 is a minimum for Conservancy
 
  Supporters.  <a href="/donate">Donate smaller amounts here</a>.</span><br/>
 

	
 
                      <label for="wantGift"><strong>Do you want to receive (another) t-shirt? </strong></label>
0 comments (0 inline, 0 general)