From e01c7f77e42ccd5d428df063c733c1a29efc29e2 Mon Sep 17 00:00:00 2001
From: Matthew Molloy <whamtet@gmail.com>
Date: Sun, 27 Dec 2020 12:59:48 +0700
Subject: [PATCH] skip validation when novalidate or form submitted indirectly

---
 src/htmx.js             | 17 +++++++++++------
 test/core/validation.js | 29 +++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/src/htmx.js b/src/htmx.js
index 59cf7c96..ef03c96a 100644
--- a/src/htmx.js
+++ b/src/htmx.js
@@ -1506,7 +1506,7 @@ return (function () {
             return true;
         }
 
-        function processInputValue(processed, values, errors, elt) {
+        function processInputValue(processed, values, errors, elt, validate) {
             if (elt == null || haveSeenNode(processed, elt)) {
                 return;
             } else {
@@ -1544,12 +1544,14 @@ return (function () {
                         values[name] = value;
                     }
                 }
-                validateElement(elt, errors);
+                if (validate) {
+                    validateElement(elt, errors);
+                }
             }
             if (matches(elt, 'form')) {
                 var inputs = elt.elements;
                 forEach(inputs, function(input) {
-                    processInputValue(processed, values, errors, input);
+                    processInputValue(processed, values, errors, input, validate);
                 });
             }
         }
@@ -1569,20 +1571,23 @@ return (function () {
             var values = {};
             var errors = [];
 
+            // only validate when form is directly submitted and novalidate is not set
+            var validate = matches(elt, 'form') && elt.noValidate !== true;
+
             // for a non-GET include the closest form
             if (verb !== 'get') {
-                processInputValue(processed, values, errors, closest(elt, 'form'));
+                processInputValue(processed, values, errors, closest(elt, 'form'), validate);
             }
 
             // include the element itself
-            processInputValue(processed, values, errors, elt);
+            processInputValue(processed, values, errors, elt, validate);
 
             // include any explicit includes
             var includes = getClosestAttributeValue(elt, "hx-include");
             if (includes) {
                 var nodes = getDocument().querySelectorAll(includes);
                 forEach(nodes, function(node) {
-                    processInputValue(processed, values, errors, node);
+                    processInputValue(processed, values, errors, node, validate);
                 });
             }
 
diff --git a/test/core/validation.js b/test/core/validation.js
index e191572f..e7f34571 100644
--- a/test/core/validation.js
+++ b/test/core/validation.js
@@ -26,6 +26,35 @@ describe("Core htmx client side validation tests", function(){
         form.textContent.should.equal("Clicked!");
     });
 
+    it('Novalidate skips form validation', function()
+    {
+        this.server.respondWith("POST", "/test", "Clicked!");
+
+        var form = make('<form hx-post="/test" hx-trigger="click" novalidate>' +
+            'No Request' +
+            '<input id="i1" name="i1" required>' +
+            '</form>');
+        form.textContent.should.equal("No Request");
+        form.click();
+        this.server.respond();
+        form.textContent.should.equal("Clicked!");
+    });
+
+    it('Validation skipped for indirect form submission', function()
+    {
+        this.server.respondWith("POST", "/test", "Clicked!");
+
+        var form = make('<form hx-post="/test" hx-trigger="click">' +
+            'No Request' +
+            '<input id="i1" name="i1" required>' +
+            '<button id="button" hx-post="/test" hx-target="form"></button>' +
+            '</form>');
+        form.textContent.should.equal("No Request");
+        byId("button").click();
+        this.server.respond();
+        form.textContent.should.equal("Clicked!");
+    });
+
     it('HTML5 pattern validation error prevents request', function()
     {
         this.server.respondWith("POST", "/test", "Clicked!");