show validation message

frontend/src/pages/invite/ui/org-form.ts

@@ -12,6 +12,7 @@ import { NotifyController } from "@/controllers/notify";
 import { type APIUser } from "@/index";
 import { isApiError } from "@/utils/api";
 import type { AuthState } from "@/utils/AuthService";
+import { maxLengthValidator } from "@/utils/form";
 import { AppStateService } from "@/utils/state";
 import { formatAPIUser } from "@/utils/user";
 
@@ -45,6 +46,8 @@ export class OrgForm extends TailwindElement {
   readonly _api = new APIController(this);
   readonly _notify = new NotifyController(this);
 
+  private readonly validateOrgNameMax = maxLengthValidator(40);
+
   readonly _renameOrgTask = new Task(this, {
     autoRun: false,
     task: async ([id, name, slug]) => {
@@ -72,9 +75,9 @@ export class OrgForm extends TailwindElement {
             autocomplete="off"
             value=${this.name === this.orgId ? "" : this.name}
             minlength="2"
-            maxlength="40"
             help-text=${msg("You can change this in your org settings later.")}
             required
+            @sl-input=${this.validateOrgNameMax.validate}
           ></sl-input>
         </div>
         <div class="mb-5">

frontend/src/utils/form.ts

@@ -39,17 +39,27 @@ export function getHelpText(maxLength: number, currentLength: number) {
  * ```
  */
 export function maxLengthValidator(maxLength: number): MaxLengthValidator {
-  const helpText = msg(str`Maximum ${maxLength} characters`);
+  const validityHelpText = msg(str`Maximum ${maxLength} characters`);
+  let origHelpText: null | string = null;
+
   const validate = (e: CustomEvent) => {
     const el = e.target as SlTextarea | SlInput;
-    const helpText = getHelpText(maxLength, el.value.length);
+
+    if (origHelpText === null && el.helpText) {
+      origHelpText = el.helpText;
+    }
+
+    const validityText = getHelpText(maxLength, el.value.length);
+    const isInvalid = el.value.length > maxLength;
+
     el.setCustomValidity(
-      el.value.length > maxLength
+      isInvalid
         ? msg(str`Please shorten this text to ${maxLength} or less characters.`)
         : "",
     );
-    el.helpText = helpText;
+
+    el.helpText = isInvalid ? validityText : origHelpText || validityHelpText;
   };
 
-  return { helpText, validate };
+  return { helpText: validityHelpText, validate };
 }