more progress, this time only doing keystroke validations on error

Author: joelhawksley

README.md

@@ -1,5 +1,3 @@
-# TODO: Should we switch back out of always-on validation once the input passes validation, or stay in always-on?
-
 # <auto-check> element
 
 An input element that validates its value against a server endpoint.
@@ -161,7 +159,6 @@ npm test
 ```
 
 TODO: Add note about uncommenting line at bottom of examples for local development
-Input something other than 422 for error response?
 
 ## License
 

src/auto-check-element.ts

@@ -210,14 +210,13 @@ function handleChange(checker: () => void, event: Event) {
   const autoCheckElement = input.closest('auto-check')
   if (!(autoCheckElement instanceof AutoCheckElement)) return
 
-  if (event.type === 'blur') {
-    if (autoCheckElement.validateAfterFirstBlur && !autoCheckElement.shouldValidate) {
-      autoCheckElement.setAttribute('should-validate', '')
+  if (input.value.length === 0) return
 
-      checker()
-      setLoadingState(event)
-    }
-  } else if (autoCheckElement.shouldValidate) {
+  if (
+    (event.type !== 'blur' && !autoCheckElement.validateAfterFirstBlur) || // Existing default behavior
+    (event.type === 'blur' && autoCheckElement.validateAfterFirstBlur) || // Only validate on blur if validate-after-first-blur is set
+    (autoCheckElement.validateAfterFirstBlur && autoCheckElement.shouldValidate) // Only validate on key inputs in validate-after-first-blur mode if should-validate is set (when input is invalid)
+  ) {
     checker()
     setLoadingState(event)
   }
@@ -334,8 +333,12 @@ async function check(autoCheckElement: AutoCheckElement) {
       if (autoCheckElement.required) {
         input.setCustomValidity('')
       }
+      if (autoCheckElement.validateAfterFirstBlur) {
+        autoCheckElement.removeAttribute('should-validate')
+      }
       input.dispatchEvent(new AutoCheckSuccessEvent(response.clone()))
     } else {
+      autoCheckElement.setAttribute('should-validate', '')
       const event = new AutoCheckErrorEvent(response.clone())
       input.dispatchEvent(event)
       if (autoCheckElement.required) {