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

supporter: Improve amount validation JavaScript.

Browse source 
* 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.
This commit is contained in:
Brett Smith 2017-01-01 16:03:03 -05:00
parent 9d855fda08
commit ba0df40639
1 changed files with 24 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,11 +11,13 @@ var flipClass = function(elem, byeClass, hiClass) {
classList.add(hiClass); classList.add(hiClass);
} }
var amountIsValid = function(amountInput) { var checkAmountValid = function(amountInput) {
var value = parseFloat(amountInput.value); var value = parseFloat(amountInput.value);
var min = parseFloat(amountInput.min); var min = parseFloat(amountInput.min);
/* Is the value is a valid float, it will stringify back to itself. */ /* 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) { var supportTypeSelector = function(supportTypeHash) {
@ -40,24 +42,35 @@ $(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. Now we hide those for JavaScript users: // enter. Now we hide those for JavaScript users:
$('.form-error').addClass('hidden');
var $formCorrectionNeeded = $('#form-correction-needed'); 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 amountInput = event.target;
var wasValid = !amountInput.classList.contains('invalid'); var wasValid = amountInput.dataset.valid === '1';
var isValid = amountIsValid(amountInput); var isValid = checkAmountValid(amountInput);
if (!wasValid && isValid) { if (isValid) {
flipClass(amountInput, 'invalid', 'valid'); flipClass(amountInput, 'invalid', 'valid');
$('.form-error', amountInput.parentNode).addClass('hidden'); if (!wasValid) {
} else if (wasValid && !isValid) { $('.form-error', amountInput.parentNode).fadeOut();
}
} else if (wasValid) {
flipClass(amountInput, 'valid', 'invalid'); 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) { $('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'); $formCorrectionNeeded.addClass('hidden');
} else { } else {
$formCorrectionNeeded.removeClass('hidden') $formCorrectionNeeded.removeClass('hidden')