button active inactive, validate inputs

This commit is contained in:
counterweight 2025-02-20 17:29:36 +01:00
parent 685fbbbde2
commit cee31c1623
Signed by: counterweight
GPG key ID: 883EDBAA726BD96C
2 changed files with 67 additions and 34 deletions

View file

@ -121,16 +121,6 @@ Behaviours:
*/
let nymInput;
let nymInputValidationWarning;
let phoneInput;
let whatsappInput;
let telegramInput;
let emailInput;
let nostrInput;
let signalInput;
let submitProfileButton;
function debounce(func, wait) {
let timeout;
return function (...args) {
@ -139,7 +129,7 @@ function debounce(func, wait) {
};
}
function validateNymInput() {
validateNymInput = debounce(() => {
const nymValue = nymInput.value.trim();
const isValid = nymValue.length >= 3 && nymValue.length <= 128;
if (isValid) {
@ -147,28 +137,65 @@ function validateNymInput() {
} else {
nymInputValidationWarning.style.display = 'block';
}
}, 500);
checkIfSubmittable = debounce((allInputs) => {
const nymIsFilled = allInputs.nymInput.value !== '';
let atLeastOneContactIsFilled = false;
for (const contactInput of allInputs.contactInputs) {
if (contactInput.value !== '') {
atLeastOneContactIsFilled = true;
}
}
const buttonShouldBeDisabled = !(nymIsFilled && atLeastOneContactIsFilled);
submitProfileButton.disabled = buttonShouldBeDisabled;
}, 1000);
function onLoadErrands(allInputs) {
allInputs.nymInput.addEventListener('input', validateNymInput);
for (const someInput of allInputs.allInputs) {
someInput.addEventListener('input', () => {
checkIfSubmittable(allInputs);
});
}
checkIfSubmittable(allInputs);
}
validateNymInput = debounce(validateNymInput, 500);
const nymInput = document.getElementById('nym-input');
const nymInputValidationWarning = document.getElementById(
'nym-input-validation-warning'
);
const phoneInput = document.getElementById('phone-input');
const whatsappInput = document.getElementById('whatsapp-input');
const telegramInput = document.getElementById('telegram-input');
const emailInput = document.getElementById('email-input');
const nostrInput = document.getElementById('nostr-input');
const signalInput = document.getElementById('signal-input');
const submitProfileButton = document.getElementById('submit-profile-button');
function onLoadErrands() {
nymInput = document.getElementById('nym-input');
nymInputValidationWarning = document.getElementById(
'nym-input-validation-warning'
);
phoneInput = document.getElementById('phone-input');
whatsappInput = document.getElementById('whatsapp-input');
telegramInput = document.getElementById('telegram-input');
emailInput = document.getElementById('email-input');
nostrInput = document.getElementById('nostr-input');
signalInput = document.getElementById('signal-input');
submitProfileButton = document.getElementById('submit-profile-button');
nymInput.addEventListener('input', function (event) {
validateNymInput();
});
}
window.onload = () => {
onLoadErrands();
const allInputs = {
nymInput: nymInput,
contactInputs: [
phoneInput,
whatsappInput,
telegramInput,
emailInput,
nostrInput,
signalInput,
],
allInputs: [
nymInput,
phoneInput,
whatsappInput,
telegramInput,
emailInput,
nostrInput,
signalInput,
],
};
onLoadErrands(allInputs);