fix(pat-validation): Support the combination of multiple custom validation constraints.

Author: thet

src/pat/validation/validation.js

@@ -178,7 +178,13 @@ class Pattern extends BasePattern {
                     msg: message,
                     attribute: input_options.equality,
                 });
-            } else if (input_options.not.after || input_options.not.before) {
+            }
+
+            if (
+                ! validity_state.customError && // No error from previous checks.
+                input_options.not.after ||
+                input_options.not.before
+            ) {
                 const msg = input_options.message.date || input_options.message.datetime;
                 const msg_default_not_before = "The date must be after %{attribute}";
                 const msg_default_not_after = "The date must be before %{attribute}";
@@ -280,7 +286,13 @@ class Pattern extends BasePattern {
                     logger.debug("Check `no-before` input.", not_after_el);
                     this.check_input({ input: not_before_el, stop: true });
                 }
-            } else if (input_options.minValues || input_options.maxValues) {
+            }
+
+            if (
+                ! validity_state.customError && // No error from previous checks.
+                input_options.minValues ||
+                input_options.maxValues
+            ) {
                 const min_values = input_options.minValues !== null && parseInt(input_options.minValues, 10) || null;
                 const max_values = input_options.maxValues !== null && parseInt(input_options.maxValues, 10) || null;
 

src/pat/validation/validation.test.js

@@ -620,6 +620,73 @@ describe("pat-validation", function () {
             expect(document.querySelectorAll("em.warning").length).toBe(1);
             expect(document.querySelector("em.warning").matches("input[name=input2] + em.warning")).toBe(true);
         });
+
+        it("1.25 - Can combine multiple custom validation rules.", async function () {
+            document.body.innerHTML = `
+                <form
+                    class="pat-validation"
+                    data-pat-validation="
+                        message-required: is required;
+                        message-equality: not equal;
+                        message-min-values: too few;
+                    "
+                >
+                    <fieldset data-pat-validation="min-values: 2">
+                        <input id="i1" name="textinput" data-pat-validation="equality: extrainput" required>
+                        <input id="i2" name="textinput">
+                    </fieldset>
+                    <input id="i3" name="extrainput">
+                </form>
+            `;
+            const form = document.querySelector(".pat-validation");
+            const input1 = document.querySelector("#i1");
+            const input2 = document.querySelector("#i2");
+            const input3 = document.querySelector("#i3");
+            const button = document.querySelector("button");
+
+            const instance = new Pattern(form);
+            await events.await_pattern_init(instance);
+
+            input1.dispatchEvent(events.change_event());
+            await utils.timeout(1); // wait a tick for async to settle.
+
+            // form is invalid due to input1's required attribute
+            expect(input1.matches(":invalid")).toBe(true);
+            expect(document.querySelectorAll("em.warning").length).toBe(1);
+            expect(document.querySelectorAll("em.warning")[0].textContent).toBe(
+                "is required"
+            );
+
+            input1.value = "ok";
+            input1.dispatchEvent(events.change_event());
+            await utils.timeout(1); // wait a tick for async to settle.
+
+            // form is invalid due to input1's equality constraint
+            expect(input1.matches(":invalid")).toBe(true);
+            expect(document.querySelectorAll("em.warning").length).toBe(1);
+            expect(document.querySelectorAll("em.warning")[0].textContent).toBe(
+                "not equal"
+            );
+
+            input3.value = "ok";
+            input1.dispatchEvent(events.change_event());
+            await utils.timeout(1); // wait a tick for async to settle.
+
+            // form is invalid due to input1's equality constraint
+            expect(input1.matches(":invalid")).toBe(true);
+            expect(document.querySelectorAll("em.warning").length).toBe(1);
+            expect(document.querySelectorAll("em.warning")[0].textContent).toBe(
+                "too few"
+            );
+
+            input2.value = "ok";
+            form.dispatchEvent(events.submit_event());
+            await utils.timeout(1); // wait a tick for async to settle.
+
+            // form is now valid.
+            expect(input1.matches(":invalid")).toBe(false);
+            expect(document.querySelectorAll("em.warning").length).toBe(0);
+        });
     });
 
     describe("2 - required inputs", function () {