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

Author: thet

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>`.