Convert further jQuery to plain JS

This commit is contained in:
Ben Sturmfels 2024-05-09 15:43:53 +10:00
parent ccc036d631
commit 10dfdb617b
Signed by: bsturmfels
GPG key ID: 023C05E2C9C068F0

View file

@ -36,33 +36,34 @@ if (window.location.hash === "#renew") {
window.location.hash = "#renewal"; window.location.hash = "#renewal";
} }
var $formCorrectionNeeded = $('#form-correction-needed'); var formCorrectionNeeded = qs('#form-correction-needed');
function init_sustainer_form_validation () { function init_sustainer_form_validation () {
// 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:
$formCorrectionNeeded.addClass('hidden'); formCorrectionNeeded.classList.add('hidden');
$('form.supporter-form').each(function(index, form) { qsa('form.supporter-form').forEach(function(form) {
var $amountInput = $('input[type=number]', form).first(); var $amountInput = $('input[type=number]', form).first();
var amountError = qs('.supporter-form-input .form-error', form);
var $amountError = $('.form-error', $amountInput.parents('.supporter-form-input')); var $amountError = $('.form-error', $amountInput.parents('.supporter-form-input'));
$amountError.on(NEW_AMOUNT_EVENT, function(event, amountData) { $amountError.on(NEW_AMOUNT_EVENT, function(event, amountData) {
var isValid = amountData.newAmount >= amountData.minAmount; var isValid = amountData.newAmount >= amountData.minAmount;
if (amountData.oldAmount === undefined) { if (amountData.oldAmount === undefined) {
if (isValid) { if (isValid) {
$amountError.addClass('hidden'); amountError.classList.add('hidden');
} else { } else {
flipClass($amountInput[0], 'valid', 'invalid'); flipClass($amountInput[0], 'valid', 'invalid');
$amountError.removeClass('hidden'); amountError.classList.remove('hidden');
} }
} else if (isValid) { } else if (isValid) {
flipClass($amountInput[0], 'invalid', 'valid'); flipClass($amountInput[0], 'invalid', 'valid');
$amountError.fadeOut(); hide(amountError);
} else if (amountData.oldAmount >= amountData.minAmount) { } else if (amountData.oldAmount >= amountData.minAmount) {
flipClass($amountInput[0], 'valid', 'invalid'); flipClass($amountInput[0], 'valid', 'invalid');
$amountError.fadeIn(); show(amountError);
} }
}); });
@ -75,12 +76,12 @@ function init_sustainer_form_validation () {
amountInput.dataset.oldAmount = amountData.newAmount; amountInput.dataset.oldAmount = amountData.newAmount;
}).trigger('focusout'); }).trigger('focusout');
$(form).on('submit', function(event) { form.addEventListener('submit', function(event) {
var amountData = buildAmountData($amountInput[0]); var amountData = buildAmountData($amountInput[0]);
if (amountData.newAmount >= amountData.minAmount) { if (amountData.newAmount >= amountData.minAmount) {
$formCorrectionNeeded.addClass('hidden'); formCorrectionNeeded.classList.add('hidden');
} else { } else {
$formCorrectionNeeded.removeClass('hidden') formCorrectionNeeded.classList.remove('hidden')
.css("font-weight", "bold").css("font-size", "150%"); .css("font-weight", "bold").css("font-size", "150%");
event.preventDefault(); event.preventDefault();
} }
@ -95,7 +96,7 @@ function init_sustainer_type_switching () {
$selectedLink.addClass("supporter-type-selector-selected"); $selectedLink.addClass("supporter-type-selector-selected");
$(".supporter-type-selection").hide(); $(".supporter-type-selection").hide();
$(event.target.hash).show(); $(event.target.hash).show();
$formCorrectionNeeded.addClass('hidden'); formCorrectionNeeded.classList.add('hidden');
return false; return false;
}; };
$(".supporter-type-selector a").bind("click", selectSupportType); $(".supporter-type-selector a").bind("click", selectSupportType);