fix(pat-validation): Put error messages always at the end of a group of inputs with the same name.

Author: thet

src/pat/validation/documentation.md

@@ -89,10 +89,10 @@ In addition both the input element and its label will get an `warning` class.
 </label>
 ```
 
-Checkboxes and radio buttons are treated differently: if they are contained in a fieldset with class `checklist` error messages are added at the end of the fieldset.
+Checkboxes and radio buttons are treated differently: The error message is alywas set after the last element of the inputs with the same name.
 
 ```html
-<fieldset class="checklist radio">
+<fieldset>
     <label><input type="radio" name="radio" /> Strawberry</label>
     <label><input type="radio" name="radio" /> Banana</label>
     <label><input type="radio" name="radio" /> Raspberry</label>

src/pat/validation/validation.js

@@ -479,15 +479,9 @@ class Pattern extends BasePattern {
             this.error_template(validation_message)
         ).firstChild;
 
-        let fieldset;
-        if (input.type === "radio" || input.type === "checkbox") {
-            fieldset = input.closest("fieldset.pat-checklist");
-        }
-        if (fieldset) {
-            fieldset.append(error_node);
-        } else {
-            input.after(error_node);
-        }
+        // Put error messge after the erronous input or - in case of multiple
+        // inputs with the same name - after the last one of the group.
+        inputs.pop().after(error_node);
         input[KEY_ERROR_EL] = error_node;
 
         let did_disable = false;

src/pat/validation/validation.test.js

@@ -564,6 +564,27 @@ describe("pat-validation", function () {
             expect(input.matches(":invalid")).toBe(true);
             expect(button.matches(":disabled")).toBe(true);
         });
+
+        it("1.23 - Puts the warning at the end of same-name inputs.", async function () {
+            document.body.innerHTML = `
+                <form class="pat-validation" id="form">
+                   <input name="group" type="radio" required/>
+                   <input name="group" type="radio" required/>
+                   <input name="group" type="radio" required/>
+                </form>
+            `;
+            const form = document.querySelector(".pat-validation");
+
+            const instance = new Pattern(form);
+            await events.await_pattern_init(instance);
+
+            form.dispatchEvent(events.submit_event());
+            await utils.timeout(1); // wait a tick for async to settle.
+
+            const warning = form.querySelector("em.warning");
+            expect(warning).toBeTruthy();
+            expect(warning.matches("input:nth-child(3) + em.warning")).toBe(true);
+        });
     });
 
     describe("2 - required inputs", function () {