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) { function debounce(func, wait) {
let timeout; let timeout;
return function (...args) { return function (...args) {
@ -139,7 +129,7 @@ function debounce(func, wait) {
}; };
} }
function validateNymInput() { validateNymInput = debounce(() => {
const nymValue = nymInput.value.trim(); const nymValue = nymInput.value.trim();
const isValid = nymValue.length >= 3 && nymValue.length <= 128; const isValid = nymValue.length >= 3 && nymValue.length <= 128;
if (isValid) { if (isValid) {
@ -147,28 +137,65 @@ function validateNymInput() {
} else { } else {
nymInputValidationWarning.style.display = 'block'; nymInputValidationWarning.style.display = 'block';
} }
} }, 500);
validateNymInput = debounce(validateNymInput, 500); checkIfSubmittable = debounce((allInputs) => {
const nymIsFilled = allInputs.nymInput.value !== '';
let atLeastOneContactIsFilled = false;
function onLoadErrands() { for (const contactInput of allInputs.contactInputs) {
nymInput = document.getElementById('nym-input'); if (contactInput.value !== '') {
nymInputValidationWarning = document.getElementById( atLeastOneContactIsFilled = true;
'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) { const buttonShouldBeDisabled = !(nymIsFilled && atLeastOneContactIsFilled);
validateNymInput(); 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 = () => { const nymInput = document.getElementById('nym-input');
onLoadErrands(); 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 charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/css/seca.css" /> <link rel="stylesheet" href="/css/seca.css" />
<script src="/javascript/createProfile.js"></script>
</head> </head>
<body> <body>
@ -28,7 +27,13 @@
id="nym-input" id="nym-input"
placeholder="ShadowySuperCoder" placeholder="ShadowySuperCoder"
/></label> /></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> </div>
<div class="over-background"> <div class="over-background">
@ -106,4 +111,5 @@
</div> </div>
</main> </main>
</body> </body>
<script src="/javascript/createProfile.js"></script>
</html> </html>