Add a validation for the edit article form.

src/main/blog/handlers.cljs

@@ -211,6 +211,54 @@
             (res/status 500)
             (res/send (ex-message err))))))))
 
+(defn htmx-update-title-validation-handler-factory
+  []
+  (fn [req res]
+    (let [channel (chan)
+          title   (.-title (.-body req))
+          content (.-content (.-body req))]
+      (go
+        (try
+          (let [error (cond
+                        (= (count title) 0)
+                        "Tittle must be nonempty!!!"
+
+                        :else
+                        nil)]
+            (res/status 200)
+            (.render res "update_title_validation"
+                     (-> {:error error
+                          :title title
+                          :layout false}
+                         (clj->js))))
+          (catch js/Error err
+            (res/status 500)
+            (res/send (ex-message err))))))))
+
+(defn htmx-update-content-validation-handler-factory
+  []
+  (fn [req res]
+    (let [channel (chan)
+          title   (.-title (.-body req))
+          content (.-content (.-body req))]
+      (go
+        (try
+          (let [error (cond
+                        (= (count content) 0)
+                        "Content must be nonempty!!!"
+
+                        :else
+                        nil)]
+            (res/status 200)
+            (.render res "update_content_validation"
+                     (-> {:error error
+                          :content content
+                          :layout false}
+                         (clj->js))))
+          (catch js/Error err
+            (res/status 500)
+            (res/send (ex-message err))))))))
+
 (defn htmx-update-article-handler-factory
   [client]
   (fn [req res]
@@ -313,7 +361,7 @@
             (res/send (ex-message err))))))))
 
 (defn htmx-create-title-validation-handler-factory
-  [client]
+  []
   (fn [req res]
     (let [channel (chan)
           title   (.-title (.-body req))

src/main/blog/server.cljs

@@ -149,6 +149,20 @@
   (. app use "/htmx/admin/rows/article/:id/"
      (handlers/user-not-authorized-factory))
 
+  (. app post "/htmx/validation/update-title/"
+     handlers/is-user-authorized
+     (handlers/htmx-update-title-validation-handler-factory))
+
+  (. app use "/htmx/validation/update-title/"
+     (handlers/user-not-authorized-factory))
+
+  (. app post "/htmx/validation/update-content/"
+     handlers/is-user-authorized
+     (handlers/htmx-update-content-validation-handler-factory))
+
+  (. app use "/htmx/validation/update-content/"
+     (handlers/user-not-authorized-factory))
+
   (. app patch "/htmx/admin/rows/article/:id/"
      handlers/is-user-authorized
      (handlers/htmx-update-article-handler-factory client))

views/admin_panel.hbs

@@ -163,7 +163,7 @@
 
   <!-- Update modal -->
   <form id="drawer-update-article"
-        x-data="{ id: null, title: '', created: '' }"
+        x-data="{ id: null, title: '', created: '', disabled: false }"
         @update_article.window="id = $event.detail.id; title = $event.detail.title; created = $event.detail.created;"
         x-init="$watch('id', () => htmx.process(htmx.find('#confirmUpdateButton')))"
         tabindex="-1"
@@ -179,25 +179,28 @@
     </button>
     <div class="grid gap-4 sm:grid-cols-1 sm:gap-6 ">
       <div class="space-y-4 sm:col-span-1 sm:space-y-6">
-        <div>
+        <div hx-target="this" hx-swap="outerHTML">
           <label for="title" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Title</label>
           <input type="text"
                  name="title"
+                 hx-post="/htmx/validation/update-title/"
                  x-model="title"
                  id="update-title"
                  placeholder="Type article title"
                  required=""
                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-[#2563eb] focus:border-[#2563eb] block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-[#3b82f6] dark:focus:border-[#3b82f6]">
         </div>
-        <div>
+        <div hx-target="this" hx-swap="outerHTML">
           <label for="content" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Content</label>
-          <textarea id="update-drawer-content" name="content" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-[#3b82f6] focus:border-[#3b82f6] dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-[#3b82f6] dark:focus:border-[#3b82f6]" placeholder="Write article here"></textarea>
+          <textarea id="update-drawer-content" name="content" hx-post="/htmx/validation/update-content/" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-[#3b82f6] focus:border-[#3b82f6] dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-[#3b82f6] dark:focus:border-[#3b82f6]" placeholder="Write article here"></textarea>
         </div>
       </div>
     </div>
 
     <div class="grid grid-cols-2 gap-4 mt-6 sm:w-1/2">
       <button id="confirmUpdateButton"
+              x-on:htmx:load.window="if(htmx.find('#title').parentElement.innerHTML.toString().match(new RegExp('aria-invalid'))){disabled=true;}else{disabled=false;}"
+              x-bind:disabled="disabled"
               data-drawer-toggle="drawer-update-article"
               aria-controls="drawer-update-article"
               type="submit"