Add thymeleaf-htmx module: Spring Boot 4.1.2 + Thymeleaf 3.1.5 + htmx 2.0.11 CRUD UI with fragment rendering, 422 validation re-render, pagination, inline edit, delete, MockMvc tests and a Chromium check

Co-Authored-By: Claude Sonnet 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_017ic4b7rnC7jppGGdHGESvy
2026-10-28 18:23:46 +00:00
parent 93c709c34d
commit 99a8a0df42
37 changed files with 1840 additions and 0 deletions
@@ -0,0 +1,64 @@
+# request (curl notation, sent through MockMvc): curl -H 'HX-Request: true' -d 'name=&email=not-an-email&role=Developer' /contacts
+HTTP 422
+---- body (636 chars) ----
+<form id="contact-form" action="/contacts" method="post"
+        hx-post="/contacts" hx-target="this" hx-swap="outerHTML">
+    <p>
+      <label>Name <input id="name" name="name" value="" class="invalid"></label>
+      <small class="error">Name is required</small>
+    </p>
+    <p>
+      <label>Email <input id="email" name="email" value="not-an-email" class="invalid"></label>
+      <small class="error">Email must look like name@host</small>
+    </p>
+    <p>
+      <label>Role <input id="role" name="role" value="Developer"></label>
+      
+    </p>
+    <button type="submit">Create</button>
+    <a href="/contacts">Cancel</a>
+  </form>
+
+# request (curl notation, sent through MockMvc): curl -d 'name=&[email protected]&role=Tester' /contacts   (no JavaScript, no HX header)
+HTTP 422
+---- body (1461 chars) ----
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>New contact</title>
+  <!-- htmx 2 swaps 2xx/3xx only. 422 must be allowed to swap, or validation errors never appear. -->
+  <meta name="htmx-config"
+        content='{"responseHandling":[{"code":"204","swap":false},{"code":"[23]..","swap":true},{"code":"422","swap":true,"error":false},{"code":"[45]..","swap":false,"error":true},{"code":"...","swap":false}]}'>
+  <link rel="stylesheet" href="/css/app.css">
+  <script src="/webjars/htmx.org/2.0.11/dist/htmx.min.js" defer></script>
+</head>
+<body>
+  <header><a href="/contacts">Contacts</a></header>
+  <main>
+  <h1>New contact</h1>
+
+  <!-- With JS: hx-post swaps this form for the re-rendered one on a 422.
+       Without JS: the same form posts normally and the full page comes back. -->
+  <form id="contact-form" action="/contacts" method="post"
+        hx-post="/contacts" hx-target="this" hx-swap="outerHTML">
+    <p>
+      <label>Name <input id="name" name="name" value="" class="invalid"></label>
+      <small class="error">Name is required</small>
+    </p>
+    <p>
+      <label>Email <input id="email" name="email" value="[email protected]"></label>
+      
+    </p>
+    <p>
+      <label>Role <input id="role" name="role" value="Tester"></label>
+      
+    </p>
+    <button type="submit">Create</button>
+    <a href="/contacts">Cancel</a>
+  </form>
+</main>
+</body>
+</html>
+