40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import { msg, str } from "@lit/localize";
|
|
import type { SlInput, SlTextarea } from "@shoelace-style/shoelace";
|
|
|
|
/**
|
|
* Validate field max length and set custom message
|
|
* Usage:
|
|
* ```
|
|
* const { helpText, validate } = maxLengthValidator(10)
|
|
*
|
|
* <sl-input
|
|
* help-text=${helpText}
|
|
* @sl-input=${validate}
|
|
* ></sl-input>
|
|
* ```
|
|
*/
|
|
export function maxLengthValidator(maxLength: number): {
|
|
helpText: string;
|
|
validate: (e: CustomEvent) => void;
|
|
} {
|
|
const helpText = msg(str`Maximum ${maxLength} characters`);
|
|
const validate = (e: CustomEvent) => {
|
|
const el = e.target as SlTextarea | SlInput;
|
|
if (el.value.length > maxLength) {
|
|
const overMax = el.value.length - maxLength;
|
|
el.setCustomValidity(
|
|
msg(str`Please shorten this text to ${maxLength} or less characters.`)
|
|
);
|
|
el.helpText =
|
|
overMax === 1
|
|
? msg(str`${overMax} character over limit`)
|
|
: msg(str`${overMax} characters over limit`);
|
|
} else {
|
|
el.setCustomValidity("");
|
|
el.helpText = helpText;
|
|
}
|
|
};
|
|
|
|
return { helpText, validate };
|
|
}
|