feat(pat-validation): Support form elements outside the form.

Author: thet

src/pat/validation/documentation.md

@@ -109,6 +109,22 @@ ValidationPattern.prototype.error_template = (message) =>
     `<em class="invalid-feedback">${message}</em>`;
 ```
 
+
+### Form elements outside the form
+
+Input elements outside of form elements are fully supported.
+pat-validation can handle structures like these:
+
+```html
+<input name="outside" form="myform" required>
+<form id="myform">
+</form>
+<button form="myform">submit</button>
+```
+
+More information on the `form` attribute can be found at [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form).
+
+
 ### Options reference
 
 > **_NOTE:_**  The form inputs must have a `name` attribute, otherwise the

src/pat/validation/validation.js

@@ -69,6 +69,20 @@ class Pattern extends BasePattern {
         this.form.setAttribute("novalidate", "");
     }
 
+    get inputs() {
+        // Return all inputs elements
+        return [...this.form.elements].filter((input) =>
+            input.matches("input[name], select[name], textarea[name]")
+        );
+    }
+
+    get disableable() {
+        // Return all elements, which should be disabled when there are errors.
+        return [...this.form.elements].filter((input) =>
+            input.matches(this.options.disableSelector)
+        );
+    }
+
     validate_all(event) {
         // Check all inputs.
         for (const input of this.inputs) {
@@ -77,13 +91,6 @@ class Pattern extends BasePattern {
     }
 
     initialize_inputs() {
-        this.inputs = [
-            ...this.form.querySelectorAll("input[name], select[name], textarea[name]"),
-        ];
-        this.disabled_elements = [
-            ...this.form.querySelectorAll(this.options.disableSelector),
-        ];
-
         for (const [cnt, input] of this.inputs.entries()) {
             // Cancelable debouncer.
             const debouncer = utils.debounce((e) => {
@@ -365,7 +372,7 @@ class Pattern extends BasePattern {
         let inputs = [input];
         if (all_of_group) {
             // Get all inputs with the same name - e.g. radio buttons, checkboxes.
-            inputs = this.inputs.filter((it) => it.name === input.name);
+            inputs = [...this.form.elements].filter((_input) => _input.name === input.name);
         }
         for (const it of inputs) {
             if (clear_state) {
@@ -378,7 +385,7 @@ class Pattern extends BasePattern {
 
         // disable selector
         if (this.form.checkValidity()) {
-            for (const it of this.disabled_elements) {
+            for (const it of this.disableable) {
                 if (it.disabled) {
                     it.removeAttribute("disabled");
                     it.classList.remove("disabled");
@@ -402,7 +409,7 @@ class Pattern extends BasePattern {
 
         // Do not set a error message for a input group like radio buttons or
         // checkboxes where one has already been set.
-        const inputs = this.inputs.filter((it) => it.name === input.name);
+        const inputs = [...this.form.elements].filter((_input) => _input.name === input.name);
         if (inputs.length > 1 && inputs.some((it) => !!it[KEY_ERROR_EL])) {
             // error message for input group already set.
             return;
@@ -426,7 +433,7 @@ class Pattern extends BasePattern {
         input[KEY_ERROR_EL] = error_node;
 
         let did_disable = false;
-        for (const it of this.disabled_elements) {
+        for (const it of this.disableable) {
             // Disable for melements if they are not already disabled and which
             // do not have set the `formnovalidate` attribute, e.g.
             // `<button formnovalidate>cancel</button>`.

src/pat/validation/validation.test.js

@@ -538,6 +538,32 @@ describe("pat-validation", function () {
             expect(event.detail.dom).toBe(el);
             expect(event.detail.action).toBe("valid");
         });
+
+        it("1.22 - Supports validation of inputs outside forms.", async function () {
+            document.body.innerHTML = `
+                <input name="outside" form="form" required/>
+                <form class="pat-validation" id="form">
+                </form>
+                <button form="form">submit</button>
+            `;
+            const form = document.querySelector(".pat-validation");
+            const input = document.querySelector("[name=outside]");
+            const button = document.querySelector("button");
+
+            const instance = new Pattern(form);
+            await events.await_pattern_init(instance);
+
+            input.value = "";
+            input.dispatchEvent(events.change_event());
+            await utils.timeout(1); // wait a tick for async to settle.
+
+            expect(document.querySelectorAll("em.warning").length).toBe(1);
+            // Skip, as jsDOM does not support the `:invalid` or `:valid`
+            // pseudo selectors on forms.
+            //expect(form.matches(":invalid")).toBe(true);
+            expect(input.matches(":invalid")).toBe(true);
+            expect(button.matches(":disabled")).toBe(true);
+        });
     });
 
     describe("2 - required inputs", function () {