fix: validate form inside a form (#11947)

* fix: validate form inside a form

* chore: remove form from interactive elements and add specific check

Author: paoloricciuti

.changeset/breezy-waves-camp.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: validate form inside a form

packages/svelte/src/compiler/phases/2-analyze/validation.js

@@ -568,6 +568,17 @@ const validation = {
 			}
 		}
 
+		// can't add form to interactive elements because those are also used by the parser
+		// to check for the last auto-closing parent.
+		if (node.name === 'form') {
+			const path = context.path;
+			for (let parent of path) {
+				if (parent.type === 'RegularElement' && parent.name === 'form') {
+					e.node_invalid_placement(node, `<${node.name}>`, parent.name);
+				}
+			}
+		}
+
 		if (interactive_elements.has(node.name)) {
 			const path = context.path;
 			for (let parent of path) {

packages/svelte/tests/validator/samples/invalid-node-placement-4/errors.json

@@ -0,0 +1,14 @@
+[
+	{
+		"code": "node_invalid_placement",
+		"message": "<form> is invalid inside <form>",
+		"start": {
+			"line": 4,
+			"column": 3
+		},
+		"end": {
+			"line": 6,
+			"column": 10
+		}
+	}
+]

packages/svelte/tests/validator/samples/invalid-node-placement-4/input.svelte

@@ -0,0 +1,9 @@
+<div>
+	<form>
+		<div>
+			<form>
+				<input />
+			</form>
+		</div>
+	</form>
+</div>