From 386611bc701849d34bc7508d677044f912d4fa17 Mon Sep 17 00:00:00 2001 From: NguyenThuyLan <116753400+NguyenThuyLan@users.noreply.github.com> Date: Wed, 19 Nov 2025 20:24:32 +0700 Subject: [PATCH] TextBox, TextArea: Message max length validation (close #20710) (#20886) * fix bug max length messsage * change localization --------- Co-authored-by: Lan Nguyen Thuy --- .../text-box/property-editor-ui-text-box.element.ts | 4 ++++ .../textarea/property-editor-ui-textarea.element.ts | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts index ae0ab74bcf..8d58a2f68e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts @@ -88,6 +88,10 @@ export class UmbPropertyEditorUITextBoxElement @input=${this.#onInput} ?required=${this.mandatory} .requiredMessage=${this.mandatoryMessage} + .maxlengthMessage=${() => { + const exceeded = (this.value?.length ?? 0) - (this._maxChars ?? 0); + return this.localize.term('textbox_characters_exceed', this._maxChars, exceeded); + }} ?readonly=${this.readonly}>`; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/textarea/property-editor-ui-textarea.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/textarea/property-editor-ui-textarea.element.ts index 34402e9acd..b136ec19b2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/textarea/property-editor-ui-textarea.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/textarea/property-editor-ui-textarea.element.ts @@ -90,6 +90,10 @@ export class UmbPropertyEditorUITextareaElement @input=${this.#onInput} ?required=${this.mandatory} .requiredMessage=${this.mandatoryMessage} + .maxlengthMessage=${() => { + const exceeded = (this.value?.length ?? 0) - (this._maxChars ?? 0); + return this.localize.term('textbox_characters_exceed', this._maxChars, exceeded); + }} ?readonly=${this.readonly}> `; }