Merge pull request #1163 from Patternslib/validation-formnovalidate-fix

fix(pat validation): Do not disable input elements with formnovalidate.

Author: thet

src/pat/validation/validation.js

@@ -117,7 +117,7 @@ class Pattern extends BasePattern {
         const validity_state = input.validity;
 
         if (event?.submitter?.hasAttribute("formnovalidate")) {
-            // Do not submit when a button with ``formnovalidate`` was used.
+            // Do not check when a button with ``formnovalidate`` was used.
             return;
         }
 
@@ -402,7 +402,10 @@ class Pattern extends BasePattern {
 
         let did_disable = false;
         for (const it of this.disabled_elements) {
-            if (!it.disabled) {
+            // Disable for melements if they are not already disabled and which
+            // do not have set the `formnovalidate` attribute, e.g.
+            // `<button formnovalidate>cancel</button>`.
+            if (!it.disabled && !it.formNoValidate) {
                 did_disable = true;
                 it.setAttribute("disabled", "disabled");
                 it.classList.add("disabled");

src/pat/validation/validation.test.js

@@ -466,7 +466,9 @@ describe("pat-validation", function () {
           <form class="pat-validation">
             <input name="i1" required>
             <input name="i2" required>
-            <button>submit</button> <!-- button will be disabled -->
+            <button name="b1">submit</button> <!-- button will be disabled -->
+            <button name="b2" formnovalidate>more submit</button> <!-- button will NOT be disabled -->
+            <button name="b3">even more submit</button> <!-- button will be disabled -->
           </form>
         `;
         const el = document.querySelector(".pat-validation");
@@ -478,6 +480,9 @@ describe("pat-validation", function () {
         await utils.timeout(1); // wait a tick for async to settle.
 
         expect(el.querySelectorAll("em.warning").length).toBe(2);
+        expect(el.querySelector("[name=b1]").disabled).toBe(true);
+        expect(el.querySelector("[name=b2]").disabled).toBe(false);
+        expect(el.querySelector("[name=b3]").disabled).toBe(true);
     });
 
     it("1.20 - does not validate all inputs after one failed check and no disabled button", async function () {