|
|
|
@ -1,5 +1,4 @@
|
|
|
|
|
if ((window as any).fwdekker == null) throw new Error("Validation module requires main module.");
|
|
|
|
|
const {$, $a, doAfterLoad, getMetaProperty} = (window as any).fwdekker;
|
|
|
|
|
import {$, $a, doAfterLoad, getMetaProperty} from "./Template";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
@ -7,9 +6,13 @@ const {$, $a, doAfterLoad, getMetaProperty} = (window as any).fwdekker;
|
|
|
|
|
*
|
|
|
|
|
* @param form the form to hide validation information from
|
|
|
|
|
*/
|
|
|
|
|
function clearFormValidity(form: HTMLFormElement): void {
|
|
|
|
|
export function clearFormValidity(form: HTMLFormElement): void {
|
|
|
|
|
clearMessageStatus(form);
|
|
|
|
|
$a("input", form).forEach((input: HTMLInputElement) => clearInputValidity(input));
|
|
|
|
|
$a("input", form).forEach((input: Element) => {
|
|
|
|
|
if (!(input instanceof HTMLInputElement)) return;
|
|
|
|
|
|
|
|
|
|
clearInputValidity(input);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -20,22 +23,21 @@ function clearFormValidity(form: HTMLFormElement): void {
|
|
|
|
|
* @param message the message to show in `card`, or `undefined` if `card` should be hidden
|
|
|
|
|
* @param type the type of message to show in `card`, or `undefined` if `card` should be hidden
|
|
|
|
|
*/
|
|
|
|
|
function showMessageType(card: HTMLElement | HTMLFormElement,
|
|
|
|
|
message?: string,
|
|
|
|
|
type?: "error" | "info" | "success" | "warning"): void {
|
|
|
|
|
if (card instanceof HTMLFormElement) {
|
|
|
|
|
card = $(`article[data-status-for="${card.id}"]`);
|
|
|
|
|
if (card == null) throw new Error("Could not find status card.");
|
|
|
|
|
}
|
|
|
|
|
export function showMessageType(card: HTMLElement | HTMLFormElement,
|
|
|
|
|
message?: string,
|
|
|
|
|
type?: "error" | "info" | "success" | "warning"): void {
|
|
|
|
|
if (card instanceof HTMLFormElement)
|
|
|
|
|
card = $(`article[data-status-for="${card.id}"]`)!;
|
|
|
|
|
const output = $("output", card)!;
|
|
|
|
|
|
|
|
|
|
card.classList.remove("hidden", "error", "info", "success", "warning");
|
|
|
|
|
|
|
|
|
|
if (message == null || type == null) {
|
|
|
|
|
card.classList.add("hidden");
|
|
|
|
|
$("output", card).innerText = "";
|
|
|
|
|
output.innerText = "";
|
|
|
|
|
} else {
|
|
|
|
|
card.classList.add(type);
|
|
|
|
|
$("output", card).innerText = message;
|
|
|
|
|
output.innerText = message;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@ -44,7 +46,7 @@ function showMessageType(card: HTMLElement | HTMLFormElement,
|
|
|
|
|
*
|
|
|
|
|
* @param card the card to clear the message from
|
|
|
|
|
*/
|
|
|
|
|
function clearMessageStatus(card: HTMLElement): void {
|
|
|
|
|
export function clearMessageStatus(card: HTMLElement): void {
|
|
|
|
|
showMessageType(card);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@ -54,7 +56,7 @@ function clearMessageStatus(card: HTMLElement): void {
|
|
|
|
|
* @param card the card to show `message` in
|
|
|
|
|
* @param message the error message to show in `card`
|
|
|
|
|
*/
|
|
|
|
|
function showMessageError(card: HTMLElement, message: string): void {
|
|
|
|
|
export function showMessageError(card: HTMLElement, message: string): void {
|
|
|
|
|
showMessageType(card, message, "error");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@ -64,7 +66,7 @@ function showMessageError(card: HTMLElement, message: string): void {
|
|
|
|
|
* @param card the card to show `message` in
|
|
|
|
|
* @param message the message to show in `card`
|
|
|
|
|
*/
|
|
|
|
|
function showMessageInfo(card: HTMLElement, message: string): void {
|
|
|
|
|
export function showMessageInfo(card: HTMLElement, message: string): void {
|
|
|
|
|
showMessageType(card, message, "info");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@ -74,7 +76,7 @@ function showMessageInfo(card: HTMLElement, message: string): void {
|
|
|
|
|
* @param card the card to show `message` in
|
|
|
|
|
* @param message the success message to show in `card`
|
|
|
|
|
*/
|
|
|
|
|
function showMessageSuccess(card: HTMLElement, message: string): void {
|
|
|
|
|
export function showMessageSuccess(card: HTMLElement, message: string): void {
|
|
|
|
|
showMessageType(card, message, "success");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@ -84,7 +86,7 @@ function showMessageSuccess(card: HTMLElement, message: string): void {
|
|
|
|
|
* @param card the card to show `message` in
|
|
|
|
|
* @param message the success message to show in `card`
|
|
|
|
|
*/
|
|
|
|
|
function showMessageWarning(card: HTMLElement, message: string): void {
|
|
|
|
|
export function showMessageWarning(card: HTMLElement, message: string): void {
|
|
|
|
|
showMessageType(card, message, "warning");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@ -94,7 +96,7 @@ function showMessageWarning(card: HTMLElement, message: string): void {
|
|
|
|
|
*
|
|
|
|
|
* @param input
|
|
|
|
|
*/
|
|
|
|
|
function clearInputValidity(input: HTMLInputElement): void {
|
|
|
|
|
export function clearInputValidity(input: HTMLInputElement): void {
|
|
|
|
|
input.classList.remove("valid", "invalid");
|
|
|
|
|
input.removeAttribute("aria-invalid");
|
|
|
|
|
input.removeAttribute("aria-errormessage");
|
|
|
|
@ -118,7 +120,7 @@ function clearInputValidity(input: HTMLInputElement): void {
|
|
|
|
|
* @param input the input to show as invalid
|
|
|
|
|
* @param message the message explaining what is invalid
|
|
|
|
|
*/
|
|
|
|
|
function showInputInvalid(input: HTMLInputElement, message?: string): void {
|
|
|
|
|
export function showInputInvalid(input: HTMLInputElement, message?: string): void {
|
|
|
|
|
clearInputValidity(input);
|
|
|
|
|
|
|
|
|
|
input.classList.add("invalid");
|
|
|
|
@ -145,7 +147,7 @@ function showInputInvalid(input: HTMLInputElement, message?: string): void {
|
|
|
|
|
* @param input the input to show as valid
|
|
|
|
|
* @param message the message to show at the input
|
|
|
|
|
*/
|
|
|
|
|
function showInputValid(input: HTMLInputElement, message?: string): void {
|
|
|
|
|
export function showInputValid(input: HTMLInputElement, message?: string): void {
|
|
|
|
|
clearInputValidity(input);
|
|
|
|
|
|
|
|
|
|
input.classList.add("valid");
|
|
|
|
@ -170,7 +172,9 @@ function showInputValid(input: HTMLInputElement, message?: string): void {
|
|
|
|
|
doAfterLoad(() => {
|
|
|
|
|
if (getMetaProperty("fwd:validation:load-forms") === undefined) return;
|
|
|
|
|
|
|
|
|
|
$a(".status-card .close").forEach((close: HTMLElement) => {
|
|
|
|
|
$a(".status-card .close").forEach((close: Element) => {
|
|
|
|
|
if (!(close instanceof HTMLElement)) return;
|
|
|
|
|
|
|
|
|
|
close.addEventListener("click", (event: MouseEvent) => {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
|
@ -184,13 +188,3 @@ doAfterLoad(() => {
|
|
|
|
|
hint.innerText = hint.dataset["hint"] ?? "";
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Export to `window`
|
|
|
|
|
(window as any).fwdekker = (window as any).fwdekker ?? {};
|
|
|
|
|
(window as any).fwdekker.validation = {
|
|
|
|
|
clearFormValidity,
|
|
|
|
|
clearMessageStatus, showMessageError, showMessageInfo, showMessageSuccess, showMessageWarning,
|
|
|
|
|
clearInputValidity, showInputInvalid, showInputValid
|
|
|
|
|
};
|
|
|
|
|
export {};
|
|
|
|
|