tech(pat-validation): Emit pat-update events with actions invalid and valid after validation checks on inputs.

Author: thet

src/pat/validation/validation.js

@@ -113,7 +113,7 @@ class Pattern extends BasePattern {
         }
 
         // In any case, clear the custom validity first.
-        this.set_error({ input: input, msg: "" });
+        this.set_error({ input: input, msg: "", skip_event: true });
         const validity_state = input.validity;
 
         if (event?.submitter?.hasAttribute("formnovalidate")) {
@@ -315,7 +315,12 @@ class Pattern extends BasePattern {
                 input_options.message.datetime
             ) {
                 this.set_error({ input: input, msg: input_options.message.datetime });
+            } else {
+                // Still an error, but without customized messages.
+                // Call `emit_update` separately
+                this.emit_update("invalid");
             }
+
         }
 
         if (event?.type === "submit") {
@@ -327,7 +332,7 @@ class Pattern extends BasePattern {
         this.set_error_message(input);
     }
 
-    set_error({ input, msg, attribute = null, min = null, max = null }) {
+    set_error({ input, msg, attribute = null, min = null, max = null, skip_event = false }) {
         // Replace some variables, as like validate.js
         if (attribute) {
             msg = msg.replace(/%{attribute}/g, attribute);
@@ -346,9 +351,12 @@ class Pattern extends BasePattern {
         // (e.g. styled date input).
         input[KEY_ERROR_MSG] = msg;
 
+        if (!skip_event) {
+            this.emit_update("invalid");
+        }
     }
 
-    remove_error(input, all_of_group = false) {
+    remove_error(input, all_of_group = false, skip_event = false) {
         // Remove error message and related referencesfrom input.
 
         let inputs = [input];
@@ -371,6 +379,10 @@ class Pattern extends BasePattern {
                 }
             }
         }
+
+        if (!skip_event) {
+            this.emit_update("valid");
+        }
     }
 
     set_error_message(input) {

src/pat/validation/validation.test.js

@@ -503,6 +503,41 @@ describe("pat-validation", function () {
         expect(el.querySelectorAll("em.warning").length).toBe(1);
     });
 
+    it("1.21 - Emits an update event when the validation state changes", async function () {
+        document.body.innerHTML = `
+            <form class="pat-validation">
+                <input name="name" required>
+            </form>
+        `;
+        const el = document.querySelector(".pat-validation");
+        const inp = el.querySelector("[name=name]");
+
+        const instance = new Pattern(el);
+        await events.await_pattern_init(instance);
+
+        let event;
+        el.addEventListener("pat-update", (e) => {
+            event = e;
+        });
+
+        inp.value = "";
+        inp.dispatchEvent(events.change_event());
+        await utils.timeout(1); // wait a tick for async to settle.
+
+        expect(el.querySelectorAll("em.warning").length).toBe(1);
+        expect(event.detail.pattern).toBe("validation");
+        expect(event.detail.dom).toBe(el);
+        expect(event.detail.action).toBe("invalid");
+
+        inp.value = "okay";
+        inp.dispatchEvent(events.change_event());
+        await utils.timeout(1); // wait a tick for async to settle.
+
+        expect(event.detail.pattern).toBe("validation");
+        expect(event.detail.dom).toBe(el);
+        expect(event.detail.action).toBe("valid");
+    });
+
     it("2.1 - validates required inputs", async function () {
         document.body.innerHTML = `
           <form class="pat-validation">