Allow form validation without focus

This commit is contained in:
Florine W. Dekker 2022-11-21 23:20:33 +01:00
parent 64eb21dfb8
commit ae202b072b
Signed by: FWDekker
GPG Key ID: D3DCFAA8A4560BE0
2 changed files with 4 additions and 3 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "@fwdekker/template", "name": "@fwdekker/template",
"version": "3.2.0", "version": "3.2.1",
"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",

View File

@ -123,13 +123,14 @@ export function clearInputValidity(input: HTMLInputElement): void {
* *
* @param input the input to show as invalid * @param input the input to show as invalid
* @param message the message explaining what is invalid * @param message the message explaining what is invalid
* @param focus `true` if `input` should receive focus
*/ */
export function showInputInvalid(input: HTMLInputElement, message?: string): void { export function showInputInvalid(input: HTMLInputElement, message?: string, focus: boolean = true): void {
clearInputValidity(input); clearInputValidity(input);
input.classList.add("invalid"); input.classList.add("invalid");
input.setAttribute("aria-invalid", "true"); input.setAttribute("aria-invalid", "true");
input.focus(); if (focus) input.focus();
const label = $(`label[for="${input.id}"]`) ?? $(`*[data-label-for="${input.id}"]`); const label = $(`label[for="${input.id}"]`) ?? $(`*[data-label-for="${input.id}"]`);
if (label != null) if (label != null)