Add external validation support to BlnInput via validator property with validitychange event. Update tests and documentation with examples.

Author: loren

src/components/BlnInput.test.ts

@@ -140,3 +140,34 @@ describe('<bln-input>', () => {
     expect(input.getAttribute('autocomplete')).toBe('email');
   });
 });
+
+  it('unterstützt externe Validierung über validator-Property', async () => {
+    const el = await mount({ label: 'Test' }) as any;
+    // Set validator as property (cannot be attribute)
+    el.validator = (v: string) => ({ valid: v.length >= 3, message: 'Mindestens 3 Zeichen' });
+    await el.updateComplete;
+    const input = el.shadowRoot!.querySelector('input')! as HTMLInputElement;
+
+    // Empty -> neutral (no icons, no error)
+    expect(el.isValid).toBeUndefined();
+    expect(el.shadowRoot!.querySelector('lucide-icon[name="Check"]')).toBeFalsy();
+    expect(el.shadowRoot!.querySelector('lucide-icon[name="CircleAlert"]')).toBeFalsy();
+
+    // Type 2 chars -> invalid
+    input.value = 'ab';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await el.updateComplete;
+    expect(el.isValid).toBe(false);
+    // icon rendered
+    expect(el.shadowRoot!.querySelector('lucide-icon[name="CircleAlert"]')).toBeTruthy();
+    // error shown
+    const err = el.shadowRoot!.querySelector('span[role="alert"]');
+    expect(err?.textContent).toContain('Mindestens 3 Zeichen');
+
+    // Type 3 chars -> valid
+    input.value = 'abc';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await el.updateComplete;
+    expect(el.isValid).toBe(true);
+    expect(el.shadowRoot!.querySelector('lucide-icon[name="Check"]')).toBeTruthy();
+  });

src/components/BlnInput.ts

@@ -34,6 +34,8 @@ export interface BlnInputProps {
     ariaLabel: string;
     ariaLabelledby: string;
     ariaDescribedby: string;
+    /** Optional externe Validierungsfunktion. Nur als Property (nicht als Attribut) setzbar. */
+    validator?: (value: string, el: BlnInput) => boolean | { valid: boolean; message?: string };
 }
 
 @customElement('bln-input')
@@ -60,6 +62,8 @@ export class BlnInput extends TailwindElement {
     @property() step: BlnInputProps['step'] = undefined as any;
     @property() inputmode: BlnInputProps['inputmode'] = undefined as any;
     @property() autocomplete: BlnInputProps['autocomplete'] = "";
+    /** Externe Validierungsfunktion: nur als Property setzbar (attribute: false). */
+    @property({attribute: false}) validator?: BlnInputProps['validator'];
 
     // Sizing/Styles
     @property() size: BlnInputProps['size'] = "medium";
@@ -80,15 +84,22 @@ export class BlnInput extends TailwindElement {
     private onInput = (e: Event) => {
         const input = e.currentTarget as HTMLInputElement;
         this.value = input.value;
+        // Run external validation if provided
+        this.runValidation();
         this.dispatchEvent(new Event('input', {bubbles: true, composed: true}));
     };
 
     private onChange = (_e: Event) => {
+        this.runValidation();
         this.dispatchEvent(new Event('change', {bubbles: true, composed: true}));
     };
 
     protected willUpdate(changed: Map<string, any>) {
         if (changed.has('isValid')) this._isValidSet = true;
+        if (changed.has('value')) {
+            // When value changes programmatically, also re-run validation if provided
+            this.runValidation();
+        }
     }
 
     protected render() {
@@ -174,6 +185,32 @@ export class BlnInput extends TailwindElement {
         ${this.error ? html`<span id="${this._errorId}" class="mt-1 text-sm text-red-600" role="alert" aria-live="polite">${this.error}</span>` : ''}
       </div>`;
     }
+    private runValidation() {
+        if (!this.validator) return;
+        const v = (this.value ?? '');
+        // Neutral state for empty unless validator explicitly handles it
+        if (v === '') {
+            // Clear validity and error for neutral display
+            this.isValid = undefined as any;
+            this.error = '' as any;
+            return;
+        }
+        try {
+            const res = this.validator(v, this as any);
+            const result = typeof res === 'boolean' ? { valid: res } : res ?? { valid: true };
+            this.isValid = result.valid as any;
+            // If invalid and message provided, set error; otherwise clear error to avoid stale messages
+            this.error = (!result.valid && result.message) ? result.message : (!result.valid ? (this.error || '') : '');
+            // Ensure we show validity icons once validator ran
+            this._isValidSet = true;
+            this.dispatchEvent(new CustomEvent('validitychange', { detail: { isValid: this.isValid, message: this.error }, bubbles: true, composed: true }));
+        } catch (e) {
+            // On validator error, do not break UI; mark invalid with generic message
+            this.isValid = false as any;
+            this.error = this.error || 'Ungültiger Wert';
+            this._isValidSet = true;
+        }
+    }
 }
 
 const nothing = undefined;

src/stories/Configure.mdx

@@ -137,6 +137,21 @@ export const RightArrow = () => <svg
         - Styling: Utility-/Tailwind-Klassen via class und Retro-Design
         - Ereignisse: input, change, focus, blur, keydown, keyup
 
+        ### Externe Validierung über eine Funktion
+        Über die Property validator kann eine eigene Prüf-Funktion von außen gesetzt werden (nur als JS-Property, nicht als HTML-Attribut).
+        Die Funktion wird bei Eingaben (input/change) und bei programmatischen Wertänderungen aufgerufen. Sie kann entweder
+        true/false zurückgeben oder ein Objekt mit den Feldern valid (boolean) und message (string, optional).
+        Bei leerem Wert bleibt der Zustand neutral (keine grünen/roten Icons). Ein Ereignis validitychange wird mit den aktuellen Werten ausgelöst.
+
+        Beispiel:
+        ```html
+        <bln-input id="u" label="Username"></bln-input>
+        <script type="module">{`
+          const el = document.getElementById('u');
+          el.validator = (v) => ({ valid: v.length >= 3, message: 'Mindestens 3 Zeichen' });
+        `}</script>
+        ```
+
         ## Schnellstart
 
         Ein einfaches Textfeld mit Label und Platzhalter: