feat(input): expose checkValidity method (#270)

Co-authored-by: Michel Binder <[email protected]>

src/components/input/Input.js

@@ -314,6 +314,24 @@ export class LeuInput extends LeuElement {
     return validationMessages
   }
 
+  isInvalid() {
+    if (this.error) {
+      return true
+    }
+
+    return this._validity === null || this.novalidate
+      ? false
+      : !this._validity.valid
+  }
+
+  /**
+   * Check input validation
+   * @returns {boolean} if valid or not
+   */
+  checkValidity() {
+    return this._inputRef.value?.checkValidity() ?? false
+  }
+
   /**
    * Creates an error list with an item for the given validity state.
    * @returns {import("lit").TemplateResult | nothing}
@@ -377,16 +395,6 @@ export class LeuInput extends LeuElement {
     return nothing
   }
 
-  isInvalid() {
-    if (this.error) {
-      return true
-    }
-
-    return this._validity === null || this.novalidate
-      ? false
-      : !this._validity.valid
-  }
-
   render() {
     const isInvalid = this.isInvalid()
 

src/components/input/stories/input.stories.js

@@ -49,8 +49,6 @@ function Template(args) {
     novalidate = false,
   } = args
 
-  console.log(min, max)
-
   return html`
     <leu-input
       value=${ifDefined(value)}

src/components/input/test/input.test.js

@@ -469,4 +469,30 @@ describe("LeuInput", () => {
 
     expect(el.valueAsNumber).to.be.NaN
   })
+
+  it("check input is valid", async () => {
+    {
+      const el = await defaultFixture({ label: "Länge", type: "number" })
+      el.focus()
+
+      await sendKeys({ type: "text" })
+      expect(el.checkValidity()).to.be.false
+
+      await elementUpdated(el)
+      const error = el.shadowRoot.querySelector(".error")
+      expect(error).not.to.be.null
+    }
+
+    {
+      const el = await defaultFixture({ label: "Länge", type: "number" })
+      el.focus()
+
+      await sendKeys({ type: "123" })
+      expect(el.checkValidity()).to.be.true
+
+      await elementUpdated(el)
+      const error = el.shadowRoot.querySelector(".error")
+      expect(error).to.be.null
+    }
+  })
 })