fix: Text character length validation should be more helpful (#1060)

* Fix bug text character length validation should be more helpful

* add variables to the message string validation

* remove formatstring

* Update packages/uui-input/lib/uui-input.element.ts

---------

Co-authored-by: Lan Nguyen Thuy <[email protected]>
Co-authored-by: Jacob Overgaard <[email protected]>

Author: 3 people

packages/uui-input/lib/uui-input.element.ts

@@ -94,8 +94,9 @@ export class UUIInputElement extends UUIFormControlMixin(
    * @attr minlength-message
    * @default
    */
-  @property({ type: String, attribute: 'minlength-message' })
-  minlengthMessage = 'This field need more characters';
+  @property({ attribute: 'minlength-message' })
+  minlengthMessage: string | ((charsLeft: number) => string) = charsLeft =>
+    `${charsLeft} characters left`;
 
   /**
    * Sets the max value of the input.
@@ -121,8 +122,11 @@ export class UUIInputElement extends UUIFormControlMixin(
    * @attr maxlength-message
    * @default
    */
-  @property({ type: String, attribute: 'maxlength-message' })
-  maxlengthMessage = 'This field exceeds the allowed amount of characters';
+  @property({ attribute: 'maxlength-message' })
+  maxlengthMessage: string | ((max: number, current: number) => string) = (
+    max,
+    current,
+  ) => `Maximum length exceeded (${current}/${max} characters)`;
 
   /**
    * Specifies the interval between legal numbers of the input
@@ -228,12 +232,26 @@ export class UUIInputElement extends UUIFormControlMixin(
 
     this.addValidator(
       'tooShort',
-      () => this.minlengthMessage,
+      () => {
+        const label = this.minlengthMessage;
+        if (typeof label === 'function') {
+          return label(
+            this.minlength ? this.minlength - String(this.value).length : 0,
+          );
+        }
+        return label;
+      },
       () => !!this.minlength && String(this.value).length < this.minlength,
     );
     this.addValidator(
       'tooLong',
-      () => this.maxlengthMessage,
+      () => {
+        const label = this.maxlengthMessage;
+        if (typeof label === 'function') {
+          return label(this.maxlength ?? 0, String(this.value).length);
+        }
+        return label;
+      },
       () => !!this.maxlength && String(this.value).length > this.maxlength,
     );
 

packages/uui-textarea/lib/uui-textarea.element.ts

@@ -81,13 +81,12 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') {
 
   /**
    * Minlength validation message.
-   * @type {boolean}
    * @attr
    * @default
    */
-  @property({ type: String, attribute: 'minlength-message' })
-  minlengthMessage = 'This field need more characters';
-
+  @property({ attribute: 'minlength-message' })
+  minlengthMessage: string | ((charsLeft: number) => string) = charsLeft =>
+    `${charsLeft} characters left`;
   /**
    * This is a maximum value of the input.
    * @type {number}
@@ -99,12 +98,14 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') {
 
   /**
    * Maxlength validation message.
-   * @type {boolean}
    * @attr
    * @default
    */
-  @property({ type: String, attribute: 'maxlength-message' })
-  maxlengthMessage = 'This field exceeds the allowed amount of characters';
+  @property({ attribute: 'maxlength-message' })
+  maxlengthMessage: string | ((max: number, current: number) => string) = (
+    max,
+    current,
+  ) => `Maximum ${max} characters, ${current} too many.`;
 
   @query('#textarea')
   protected _textarea!: HTMLInputElement;
@@ -163,12 +164,26 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') {
 
     this.addValidator(
       'tooShort',
-      () => this.minlengthMessage,
+      () => {
+        const label = this.minlengthMessage;
+        if (typeof label === 'function') {
+          return label(
+            this.minlength ? this.minlength - String(this.value).length : 0,
+          );
+        }
+        return label;
+      },
       () => !!this.minlength && (this.value as string).length < this.minlength,
     );
     this.addValidator(
       'tooLong',
-      () => this.maxlengthMessage,
+      () => {
+        const label = this.maxlengthMessage;
+        if (typeof label === 'function') {
+          return label(this.maxlength ?? 0, String(this.value).length);
+        }
+        return label;
+      },
       () => !!this.maxlength && (this.value as string).length > this.maxlength,
     );
   }