Check all associated elements for form validity

Closes #2979. Closes #2980.
jsdom · Mar 28, 2021 · c92f9c1 · c92f9c1
1 parent 2202703
commit c92f9c1
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/lib/jsdom/living/nodes/HTMLFormElement-impl.js b/lib/jsdom/living/nodes/HTMLFormElement-impl.js
@@ -191,7 +191,7 @@ class HTMLFormElementImpl extends HTMLElementImpl {
   // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#statically-validate-the-constraints
   _staticallyValidateConstraints() {
     const controls = [];
-    for (const el of domSymbolTree.treeIterator(this)) {
+    for (const el of this.elements) {
       if (el.form === this && isSubmittable(el)) {
         controls.push(el);
       }

diff --git a/...web-platform-tests/to-upstream/html/semantics/forms/constraints/using-form-attribute.html b/...web-platform-tests/to-upstream/html/semantics/forms/constraints/using-form-attribute.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forms outside the form element that use the form="" attribute still get validated</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<input id="the-input" type="text" form="the-form" required>
+<form id="the-form"></form>
+
+<script>
+"use strict";
+
+test(() => {
+  const el = document.querySelector("#the-input");
+  const form = document.querySelector("#the-form");
+
+  let firedInvalid = false;
+  el.addEventListener("invalid", () => {
+    firedInvalid = true;
+  });
+
+  assert_false(form.checkValidity(), "checkValidity");
+  assert_false(form.reportValidity(), "reportValidity");
+  assert_true(firedInvalid, "fired invalid event");
+});
+</script>