Add external validator to TextInput

elsci-io · Apr 26, 2024 · 5ca9dd1 · 5ca9dd1
1 parent 9d2a816
commit 5ca9dd1
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/src/InputValidator.js b/src/InputValidator.js
@@ -17,7 +17,7 @@ export default class InputValidator {
     }
 
     /**
-     * @param {EditText} inputEl
+     * @param {EditText|TextInput} inputEl
      * @param {*} valueToValidate
      * @return {ValidationResult}
      */

diff --git a/src/TextInput/TextInput.js b/src/TextInput/TextInput.js
@@ -23,6 +23,9 @@ export default class TextInput extends HTMLElement {
     };
     /** @type {string} */
     #lastChangedValue;
+    // @ts-ignore
+    /** @type {InputValidator} */
+    #externalValidators = [];
 
     connectedCallback() {
         this.innerHTML = this.#htmlTemplate();
@@ -42,6 +45,12 @@ export default class TextInput extends HTMLElement {
         window.removeEventListener("visibilitychange", this.#onVisibilityChange.bind(this), { capture: true });
     }
 
+    // @ts-ignore
+    /** @param {InputValidator} validator */
+    addExternalValidator(validator) {
+        this.#externalValidators.push(validator);
+    }
+
     /**
      * Returns trimmed value of the input.
      * @returns {string}
@@ -66,9 +75,20 @@ export default class TextInput extends HTMLElement {
     }
 
     checkValidity() {
-        const isValid = this.#validityState.checkValidity();
+        if (!this.#validityState.checkValidity()){
+            this.errorMessage = this.#validityState.errorMessage;
+            return false;
+        }
         this.errorMessage = this.#validityState.errorMessage;
-        return isValid;
+        for (const /**@type {InputValidator} */ validator of this.#externalValidators) {
+            const result = validator.validate(this, this.value);
+            if (!result.isValid) {
+                this.errorMessage = result.errorMessage;
+                this.focus()
+                return false;
+            }
+        }
+        return true;
     }
 
     get errorMessage() {