Add a validation for the create form.

src/main/blog/handlers.cljs

@@ -312,6 +312,54 @@
             (res/status 500)
             (res/send (ex-message err))))))))
 
+(defn htmx-create-title-validation-handler-factory
+  [client]
+  (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 "create_title_validation"
+                     (-> {:error error
+                          :title title
+                          :layout false}
+                         (clj->js))))
+          (catch js/Error err
+            (res/status 500)
+            (res/send (ex-message err))))))))
+
+(defn htmx-create-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 "create_content_validation"
+                     (-> {:error error
+                          :content content
+                          :layout false}
+                         (clj->js))))
+          (catch js/Error err
+            (res/status 500)
+            (res/send (ex-message err))))))))
+
 (defn htmx-create-article-handler-factory
   [client]
   (fn [req res]

src/main/blog/server.cljs

@@ -111,6 +111,20 @@
   (. app post "/htmx/search/articles/"
      (handlers/htmx-search-articles-handler-factory client))
 
+  (. app post "/htmx/validation/create-title/"
+     handlers/is-user-authorized
+     (handlers/htmx-create-title-validation-handler-factory client))
+
+  (. app use "/htmx/validation/create-title/"
+     (handlers/user-not-authorized-factory))
+
+  (. app post "/htmx/validation/create-content/"
+     handlers/is-user-authorized
+     (handlers/htmx-create-content-validation-handler-factory))
+
+  (. app use "/htmx/validation/create-content/"
+     (handlers/user-not-authorized-factory))
+
   (. app post "/htmx/articles/"
      handlers/is-user-authorized
      (handlers/htmx-create-article-handler-factory client))

views/admin_panel.hbs

@@ -131,15 +131,20 @@
           </button>
         </div>
         <!-- Modal body -->
-        <form>
+        <form x-data="{ disabled: true }">
           <div class="grid gap-4 mb-4 sm:grid-cols-1">
-            <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" id="title" 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]" placeholder="Type article title" required="">
+              <input type="text" name="title" id="title" hx-post="/htmx/validation/create-title/" 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]" placeholder="Type article title" required="" aria-invalid="true">
+            </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="content" name="content" hx-post="/htmx/validation/create-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" aria-invalid="true"></textarea>
             </div>
-            <div><label for="content" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Content</label><textarea id="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></div>
           </div>
           <button type="submit"
+            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"
             hx-post="/htmx/articles/"
 	    hx-target="#articles"
 	    hx-swap="afterbegin"

views/create_content_validation.hbs

@@ -0,0 +1,8 @@
+<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="content" name="content" hx-post="/htmx/validation/create-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"
+  {{#if error}}aria-invalid="true"{{/if}}>{{ content }}</textarea>
+  {{#if error}}
+    <div class='text-sm font-bold leading-tight tracking-tight text-red-600 mt-2'>{{ error }}</div>
+  {{/if}}
+</div>

views/create_title_validation.hbs

@@ -0,0 +1,7 @@
+<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" id="title" hx-post="/htmx/validation/create-title/" 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]" placeholder="Type article title" required="" {{#if error}}aria-invalid="true"{{/if}} value="{{ title }}">
+  {{#if error}}
+    <div class='text-sm font-bold leading-tight tracking-tight text-red-600 mt-2'>{{ error }}</div>
+  {{/if}}
+</div>