update.eternae.ink/assets/ts/forms.ts

44 lines
1.4 KiB
TypeScript
Raw Normal View History

2020-09-23 13:30:48 +02:00
/*
* For labels to update their state (css selectors based on the value attribute)
*/
import {ValidationError} from "swaf/db/Validator";
2020-10-05 13:38:03 +02:00
export function updateInputs(): void {
2020-09-23 13:30:48 +02:00
document.querySelectorAll<HTMLInputElement | HTMLTextAreaElement>('input, textarea').forEach(el => {
if (!el.dataset.inputSetup) {
el.dataset.inputSetup = 'true';
if (el.type !== 'checkbox') {
el.setAttribute('value', el.value);
el.addEventListener('change', () => {
el.setAttribute('value', el.value);
2020-09-23 13:30:48 +02:00
});
}
2020-09-23 13:30:48 +02:00
}
});
}
2020-09-23 13:30:48 +02:00
document.addEventListener('DOMContentLoaded', () => {
updateInputs();
2020-06-15 12:09:08 +02:00
});
2020-10-05 13:38:03 +02:00
export function applyFormMessages(
formElement: HTMLFormElement,
messages: { [p: string]: ValidationError<unknown> },
): void {
2020-06-15 12:09:08 +02:00
for (const fieldName of Object.keys(messages)) {
const field = formElement.querySelector('#field-' + fieldName);
2020-09-23 13:30:48 +02:00
if (!field) continue;
2020-06-15 12:09:08 +02:00
let parent = field.parentElement;
while (parent && !parent.classList.contains('form-field')) parent = parent.parentElement;
2020-10-05 13:38:03 +02:00
let err = field.querySelector('.error');
if (!err) {
err = document.createElement('div');
err.classList.add('error');
parent?.insertBefore(err, parent.querySelector('.hint') || parent);
2020-06-15 12:09:08 +02:00
}
2020-10-05 13:38:03 +02:00
err.innerHTML = `<i data-feather="x-circle"></i> ${messages[fieldName].message}`;
2020-06-15 12:09:08 +02:00
}
2020-09-23 13:30:48 +02:00
}