KKlochko/simple-cljs-blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add a validation for the edit article form.

Browse Source
This commit is contained in:
KKlochko
2024-04-19 09:41:31 +03:00
parent 4e6d36d98c
commit 88a9eb7749
3 changed files with 70 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/admin_panel.hbs
+7 -4
View File
@@ -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"