From 5c4fe9fe8b64f89288f2c6d615f98f76bb75bb03 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 4 Dec 2025 11:37:27 -0600
Subject: [PATCH 1/2] Prevent board names with only spaces and show validation
 message

---
 app/javascript/controllers/form_controller.js | 7 ++++++-
 app/views/boards/new.html.erb                 | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/javascript/controllers/form_controller.js b/app/javascript/controllers/form_controller.js
index e910d6622..d675dcae5 100644
--- a/app/javascript/controllers/form_controller.js
+++ b/app/javascript/controllers/form_controller.js
@@ -21,8 +21,13 @@ export default class extends Controller {
 
     if (input) {
       const value = (input.value || "").trim()
-      if (value.length === 0) {
+      const isEmpty = value.length === 0
+
+      if (isEmpty) {
         event.preventDefault()
+        input.setCustomValidity(input.validationMessage || "Please fill out this field")
+        input.reportValidity()
+        input.addEventListener("input", () => input.setCustomValidity(""), { once: true })
       }
     }
   }
diff --git a/app/views/boards/new.html.erb b/app/views/boards/new.html.erb
index 4536af7fc..da74845d6 100644
--- a/app/views/boards/new.html.erb
+++ b/app/views/boards/new.html.erb
@@ -1,9 +1,9 @@
 <% @page_title = "Create a new board" %>
 
 <div class="panel panel--centered">
-  <%= form_with model: @board, class: "flex flex-column gap", data: { controller: "form" } do |form| %>
+  <%= form_with model: @board, class: "flex flex-column gap", data: { controller: "form", action: "submit->form#preventEmptySubmit" } do |form| %>
     <h1 class="txt-x-large margin-none font-weight-black"><%= @page_title %></h1>
-    <%= form.text_field :name, required: true, class: "input full-width", autofocus: true, autocomplete: "off",placeholder: "Name it…", data: { action: "keydown.esc@document->form#cancel" } %>
+    <%= form.text_field :name, required: true, class: "input full-width", autofocus: true, autocomplete: "off", placeholder: "Name it…", data: { form_target: "input", action: "keydown.esc@document->form#cancel" } %>
 
     <button type="submit" class="btn btn--link center">
       <span>Create board</span>

From 23ec3f129a211199d0ed2599b00d6d3ad19dd4dc Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 4 Dec 2025 11:43:55 -0600
Subject: [PATCH 2/2] Support custom validation messages

---
 app/javascript/controllers/form_controller.js | 2 +-
 app/views/boards/new.html.erb                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/javascript/controllers/form_controller.js b/app/javascript/controllers/form_controller.js
index d675dcae5..f917bd092 100644
--- a/app/javascript/controllers/form_controller.js
+++ b/app/javascript/controllers/form_controller.js
@@ -25,7 +25,7 @@ export default class extends Controller {
 
       if (isEmpty) {
         event.preventDefault()
-        input.setCustomValidity(input.validationMessage || "Please fill out this field")
+        input.setCustomValidity(input.dataset.validationMessage || "Please fill out this field")
         input.reportValidity()
         input.addEventListener("input", () => input.setCustomValidity(""), { once: true })
       }
diff --git a/app/views/boards/new.html.erb b/app/views/boards/new.html.erb
index da74845d6..748028b8d 100644
--- a/app/views/boards/new.html.erb
+++ b/app/views/boards/new.html.erb
@@ -3,7 +3,7 @@
 <div class="panel panel--centered">
   <%= form_with model: @board, class: "flex flex-column gap", data: { controller: "form", action: "submit->form#preventEmptySubmit" } do |form| %>
     <h1 class="txt-x-large margin-none font-weight-black"><%= @page_title %></h1>
-    <%= form.text_field :name, required: true, class: "input full-width", autofocus: true, autocomplete: "off", placeholder: "Name it…", data: { form_target: "input", action: "keydown.esc@document->form#cancel" } %>
+    <%= form.text_field :name, required: true, class: "input full-width", autofocus: true, autocomplete: "off", placeholder: "Name it…", data: { form_target: "input", action: "keydown.esc@document->form#cancel", validation_message: "Board names can‘t be blank" } %>
 
     <button type="submit" class="btn btn--link center">
       <span>Create board</span>