Support custom labels for validation

This commit is contained in:
Florine W. Dekker 2022-11-21 08:25:45 +01:00
parent 527b52069b
commit 107962a83d
Signed by: FWDekker
GPG Key ID: D3DCFAA8A4560BE0
3 changed files with 6 additions and 4 deletions

View File

@ -1,6 +1,6 @@
{
"name": "@fwdekker/template",
"version": "3.0.0",
"version": "3.1.0",
"description": "The base template for pages on fwdekker.com.",
"author": "Florine W. Dekker",
"license": "MIT",

View File

@ -47,12 +47,14 @@
label.invalid,
*[data-label-for].invalid,
input.invalid,
*[data-hint-for].invalid {
color: var(--form-element-invalid-border-color) !important;
}
label.valid,
*[data-label-for].valid,
input.valid,
*[data-hint-for].valid {
color: var(--form-element-valid-border-color) !important;

View File

@ -105,7 +105,7 @@ export function clearInputValidity(input: HTMLInputElement): void {
input.removeAttribute("aria-invalid");
input.removeAttribute("aria-errormessage");
const label = $(`label[for="${input.id}"]`);
const label = $(`label[for="${input.id}"]`) ?? $(`*[data-label-for="${input.id}"]`);
if (label != null)
label.classList.remove("valid", "invalid");
@ -131,7 +131,7 @@ export function showInputInvalid(input: HTMLInputElement, message?: string): voi
input.setAttribute("aria-invalid", "true");
input.focus();
const label = $(`label[for="${input.id}"]`);
const label = $(`label[for="${input.id}"]`) ?? $(`*[data-label-for="${input.id}"]`);
if (label != null)
label.classList.add("invalid");
@ -157,7 +157,7 @@ export function showInputValid(input: HTMLInputElement, message?: string): void
input.classList.add("valid");
input.setAttribute("aria-invalid", "false");
const label = $(`label[for="${input.id}"]`);
const label = $(`label[for="${input.id}"]`) ?? $(`*[data-label-for="${input.id}"]`);
if (label != null)
label.classList.add("valid");