From aa8410c7237ba16a37694955d757b6154ddac34a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pedro=20P=C3=A9rez?= <hola@pedroperez.dev>
Date: Tue, 9 Dec 2025 19:16:47 +0100
Subject: [PATCH] add validation

---
 htmx-alpine/templates/fragments/todo-row.html | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/htmx-alpine/templates/fragments/todo-row.html b/htmx-alpine/templates/fragments/todo-row.html
index 8189c99..b663ec1 100644
--- a/htmx-alpine/templates/fragments/todo-row.html
+++ b/htmx-alpine/templates/fragments/todo-row.html
@@ -1,6 +1,6 @@
 <li
   id="todo-{{.ID}}"
-  x-data="{ editing: false, name: '{{.Name}}', backup: '{{.Name}}' }"
+  x-data="{ editing: false, name: '{{.Name}}', backup: '{{.Name}}', error: '' }"
   @htmx:response-error="name = backup; $dispatch('show-toast', 'Error al actualizar. Inténtelo de nuevo.');"
 >
   <div x-show="!editing" @dblclick="editing = true" x-text="name">
@@ -12,17 +12,27 @@
       hx-put="/todo/{{.ID}}/update"
       hx-target="closest li"
       hx-swap="outerHTML"
-      @submit="editing = false"
+      @htmx:before-request="
+        if (name.trim().length <3) {
+      $event.preventDefault();
+      error = 'Debe tener 3 caracteres como mínimo';
+      return;
+      } else {
+      error = '';
+      editing = false;}"
     >
       <input
         type="text"
         name="name"
         value="{{ .Name }}"
         @keydown.escape="name = backup; editing = false"
+        @input="error = ''"
         x-model="name"
         x-init="$el.focus()"
       />
 
+      <span x-show="error" x-text="error"></span>
+
       <button type="button" @click="name =backup; editing = false">
         Cancelar
       </button>