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 {
display: none;
margin-left: 10px;
color: green;
}
.form-error-show {
color: red;
margin-left: 10px;
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
*/
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);

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="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>