From 107962a83dbb0e813e477b8778e832de0bd64f9f Mon Sep 17 00:00:00 2001
From: "Florine W. Dekker" <florine@fwdekker.com>
Date: Mon, 21 Nov 2022 08:25:45 +0100
Subject: [PATCH] Support custom labels for validation

---
 package.json                         | 2 +-
 src/main/css/snippets/validation.css | 2 ++
 src/main/js/Validation.ts            | 6 +++---
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 1dbd52b..0fae4a4 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/main/css/snippets/validation.css b/src/main/css/snippets/validation.css
index 8c77c1c..f5cdaab 100644
--- a/src/main/css/snippets/validation.css
+++ b/src/main/css/snippets/validation.css
@@ -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;
diff --git a/src/main/js/Validation.ts b/src/main/js/Validation.ts
index 39b6bba..084837f 100644
--- a/src/main/js/Validation.ts
+++ b/src/main/js/Validation.ts
@@ -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");