counterweight/secajs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

button active inactive, validate inputs

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

85
src/public/javascript/createProfile.js
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);
validateNymInput = debounce(validateNymInput, 500);
checkIfSubmittable = debounce((allInputs) => {
const nymIsFilled = allInputs.nymInput.value !== '';
let atLeastOneContactIsFilled = false;
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');
for (const contactInput of allInputs.contactInputs) {
if (contactInput.value !== '') {
atLeastOneContactIsFilled = true;
}
}
nymInput.addEventListener('input', function (event) {
validateNymInput();
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);
}
window.onload = () => {
onLoadErrands();
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');
const allInputs = {
nymInput: nymInput,
contactInputs: [
phoneInput,
whatsappInput,
telegramInput,
emailInput,
nostrInput,
signalInput,
],
allInputs: [
nymInput,
phoneInput,
whatsappInput,
telegramInput,
emailInput,
nostrInput,
signalInput,
],
};
onLoadErrands(allInputs);

10
src/views/createProfile.ejs
View file

@ -5,7 +5,6 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/css/seca.css" />
<script src="/javascript/createProfile.js"></script>
</head>
<body>
@ -28,7 +27,13 @@
id="nym-input"
placeholder="ShadowySuperCoder"
/></label>
<p id="nym-input-validation-warning" class="text-warning" style="display: none">Debe tener al menos 3 caracteres.</p>
<p
id="nym-input-validation-warning"
class="text-warning"
style="display: none"
>
Debe tener al menos 3 caracteres.
</p>
</div>
</div>
<div class="over-background">
@ -106,4 +111,5 @@
</div>
</main>
</body>
<script src="/javascript/createProfile.js"></script>
</html>