diff --git a/app/javascript/controllers/form_controller.js b/app/javascript/controllers/form_controller.js
index 2b30c99b9..db1602feb 100644
--- a/app/javascript/controllers/form_controller.js
+++ b/app/javascript/controllers/form_controller.js
@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 import { debounce, nextFrame } from "helpers/timing_helpers";
 
 export default class extends Controller {
-  static targets = [ "cancel", "submit" ]
+  static targets = [ "cancel", "submit", "input" ]
 
   static values = {
     debounceTimeout: { type: Number, default: 300 }
@@ -16,6 +16,17 @@ export default class extends Controller {
     this.element.requestSubmit()
   }
 
+  preventEmptySubmit(event) {
+    const input = this.hasInputTarget ? this.inputTarget : null
+
+    if (input) {
+      const value = (input.value || "").trim()  
+      if (value.length === 0) {
+        event.preventDefault()
+      }
+    }
+  }
+
   debouncedSubmit(event) {
     this.submit(event)
   }
diff --git a/app/views/cards/display/perma/_steps.html.erb b/app/views/cards/display/perma/_steps.html.erb
index 1c4f51e0f..6fd9defc5 100644
--- a/app/views/cards/display/perma/_steps.html.erb
+++ b/app/views/cards/display/perma/_steps.html.erb
@@ -3,8 +3,8 @@
 
   <li class="step">
     <input type="checkbox" class="step__checkbox" disabled>
-    <%= form_with model: [card, Step.new], url: card_steps_path(card) do |form| %>
-      <%= form.text_field :content, class: "input step__content hide-focus-ring", placeholder: "Add a step…", required: true, autocomplete: "off" %>
+    <%= form_with model: [card, Step.new], url: card_steps_path(card), data: { controller: "form", action: "submit->form#preventEmptySubmit" } do |form| %>
+      <%= form.text_field :content, class: "input step__content hide-focus-ring", placeholder: "Add a step…", autocomplete: "off", data: { form_target: "input" } %>
     <% end %>
   </li>
 </ol>