Conservancy/website
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

supporter: Fix redundant amount, error ids.

Browse source
This commit is contained in:
Brett Smith 2016-12-31 17:43:18 -05:00
parent 7842ca6c57
commit 6392ae3a43
3 changed files with 42 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
www/conservancy/static/css/forms.css
View file

@ -34,12 +34,6 @@
} }
.form-error { .form-error {
display: none;
margin-left: 10px;
color: green;
}
.form-error-show {
color: red; color: red;
margin-left: 10px; margin-left: 10px;
font-size: 75%; font-size: 75%;

81
www/conservancy/static/js/supporter-page.js
View file

@ -5,6 +5,19 @@
** Find a copy of GPL at https://sfconservancy.org/GPLv3 ** 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) { var supportTypeSelector = function(supportTypeHash) {
return $(".supporter-type-selector a[href=" + supportTypeHash + "]"); return $(".supporter-type-selector a[href=" + supportTypeHash + "]");
}; };
@ -26,53 +39,31 @@ $window.load(function() {
$(document).ready(function() { $(document).ready(function() {
// Forms start in "invalid" form, with the errors shown, so that // Forms start in "invalid" form, with the errors shown, so that
// non-Javascript users see the errors by default and know what they must // non-Javascript users see the errors by default and know what they must
// enter. The following two lines correct that. // enter. Now we hide those for JavaScript users:
$('*#amount').addClass("valid"); $('.form-error').addClass('hidden');
$('.supporter-form-inputs .form-error-show') var $formCorrectionNeeded = $('#form-correction-needed');
.removeClass('form-error-show').addClass('form-error');
$('.dinner-form-inputs .form-error-show')
.removeClass('form-error-show').addClass('form-error');
$('*#amount').on('input', function() { $('form.supporter-form input[type=number]').on('focusout', function(event) {
var input=$(this); var amountInput = event.target;
var value = input.val(); var wasValid = !amountInput.classList.contains('invalid');
var errorElement=$("span#error", input.parent()); var isValid = amountIsValid(amountInput);
var noCommaValue = value; if (!wasValid && isValid) {
noCommaValue = value.replace(/,/g, ""); flipClass(amountInput, 'invalid', 'valid');
var re = /^((\d{1,3}(,?\d{3})*?(\.\d{0,2})?)|\d+(\.\d{0,2})?)$/; $('.form-error', amountInput.parentNode).addClass('hidden');
var isValid = ( re.test(value) && } else if (wasValid && !isValid) {
parseInt(noCommaValue) >= parseInt(input.attr("min"))); flipClass(amountInput, 'valid', 'invalid');
if (isValid) { $('.form-error', amountInput.parentNode).removeClass('hidden');
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");
} }
}); });
var validateFormAtSubmission = function(element, event) {
var valid = element.hasClass("valid"); $('form.supporter-form').on('submit', function(event) {
if (! valid) { if (amountIsValid($('input[name=amount]', event.target)[0])) {
$("#form-correction-needed").removeClass("form-error").addClass("form-error-show") $formCorrectionNeeded.addClass('hidden');
.css("font-weight", "bold").css("font-size", "150%"); } else {
event.preventDefault(); $formCorrectionNeeded.removeClass('hidden')
} else { .css("font-weight", "bold").css("font-size", "150%");
$("#form-correction-needed").removeClass("form-error-show").addClass("form-error"); event.preventDefault();
} }
};
$(".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);
}); });
var selectSupportType = function(event) { var selectSupportType = function(event) {
@ -87,7 +78,7 @@ $(document).ready(function() {
$element.hide(); $element.hide();
} }
}); });
$("#form-correction-needed").removeClass("form-error-show").addClass("form-error"); $formCorrectionNeeded.addClass('hidden');
return false; return false;
}; };
$(".supporter-type-selector a").bind("click", selectSupportType); $(".supporter-type-selector a").bind("click", selectSupportType);

12
www/conservancy/templates/supporter/index.html
View file

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