Add manual validation trigger

Author: sutterj

README.md

@@ -139,6 +139,14 @@ input.addEventListener('auto-check-complete', function(event) {
 [CSRF]: https://en.wikipedia.org/wiki/Cross-site_request_forgery
 [Response]: https://developer.mozilla.org/en-US/docs/Web/API/Response
 
+## Manually Trigger Validation
+
+The `triggerValidation()` function can be used to manually tigger the `<auto-check>` element.
+
+```js
+document.getElementById('input-element').closest('auto-check').triggerValidation()
+```
+
 ## Browser support
 
 Browsers without native [custom element support][support] require a [polyfill][].

custom-elements.json

@@ -155,6 +155,15 @@
               "kind": "field",
               "name": "onloadend"
             },
+            {
+              "kind": "method",
+              "name": "triggerValidation",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "field",
               "name": "input",

src/auto-check-element.ts

@@ -109,6 +109,7 @@ export class AutoCheckElement extends HTMLElement {
 
     input.addEventListener('blur', changeHandler)
     input.addEventListener('input', changeHandler)
+    input.addEventListener('triggerValidation', changeHandler)
     input.autocomplete = 'off'
     input.spellcheck = false
   }
@@ -134,6 +135,13 @@ export class AutoCheckElement extends HTMLElement {
     }
   }
 
+  triggerValidation(): void {
+    const input = this.input
+    if (!input) return
+
+    input.dispatchEvent(new Event('triggerValidation'))
+  }
+
   static get observedAttributes(): string[] {
     return ['required']
   }
@@ -226,7 +234,8 @@ function handleChange(checker: () => void, event: Event) {
       autoCheckElement.onlyValidateOnBlur &&
       !autoCheckElement.validateOnKeystroke &&
       autoCheckElement.hasAttribute('dirty')) || // Only validate on blur if only-validate-on-blur is set, input is dirty, and input is not current validating on keystroke
-    (event.type === 'input' && autoCheckElement.onlyValidateOnBlur && autoCheckElement.validateOnKeystroke) // Only validate on key inputs in only-validate-on-blur mode if validate-on-keystroke is set (when input is invalid)
+    (event.type === 'input' && autoCheckElement.onlyValidateOnBlur && autoCheckElement.validateOnKeystroke) || // Only validate on key inputs in only-validate-on-blur mode if validate-on-keystroke is set (when input is invalid)
+    event.type === 'triggerValidation' // Trigger validation manually
   ) {
     setLoadingState(event)
     checker()

test/auto-check.js

@@ -202,6 +202,48 @@ describe('auto-check element', function () {
     })
   })
 
+  describe('manually triggering validation', function () {
+    let checker
+    let input
+
+    beforeEach(function () {
+      const container = document.createElement('div')
+      container.innerHTML = `
+        <auto-check csrf="foo" src="/success" required>
+          <input id="input-field" value="hub">
+        </auto-check>`
+      document.body.append(container)
+
+      checker = document.querySelector('auto-check')
+      input = checker.querySelector('input')
+    })
+
+    it('emits on manual trigger', async function () {
+      const events = []
+      input.addEventListener('auto-check-start', event => events.push(event.type))
+
+      document.getElementById('input-field').closest('auto-check').triggerValidation()
+
+      assert.deepEqual(events, ['auto-check-start'])
+    })
+
+    it('does not emit on manual trigger if input is empty', async function () {
+      const events = []
+      input.addEventListener('auto-check-start', event => events.push(event.type))
+
+      input.value = ''
+      document.getElementById('input-field').closest('auto-check').triggerValidation()
+
+      assert.deepEqual(events, [])
+    })
+
+    afterEach(function () {
+      document.body.innerHTML = ''
+      checker = null
+      input = null
+    })
+  })
+
   describe('using HTTP GET', function () {
     let checker
     let input