fwdekker.com
/
template
1
0
Fork 0
Code Issues 2 Pull Requests Releases 90 Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

2
src/main/css/snippets/validation.css
View File

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

6
src/main/js/Validation.ts
View File

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