validate ตอนเพิ่มเรื่องใหม่ support

src/modules/00_support/components/NewIssue.vue

@@ -6,8 +6,9 @@ const store = useSupportStore();
 
 const isOpen = ref<boolean>(false);
 const title = ref<string>("");
+const titleRef = ref();
 const categoryId = ref<string>("");
-
+const categoryRef = ref();
 const options = ref<{ label: string; value: string }[]>([]);
 
 onMounted(async () => {
@@ -19,10 +20,21 @@ onMounted(async () => {
     }));
   }
 });
+
+async function onSubmit() {
+  titleRef.value.validate();
+  categoryRef.value.validate();
+  if (titleRef.value.hasError || categoryRef.value.hasError) return "";
+  await store.newIssue(title.value, categoryId.value);
+  isOpen.value = false;
+}
 </script>
 
 <template>
-  <div @click="isOpen = true" class="col-10 row items-center q-py-sm q-px-md new">
+  <div
+    @click="isOpen = true"
+    class="col-10 row items-center q-py-sm q-px-md new"
+  >
     <div class="noactive-avatar">
       <div class="new-avatar">
         <q-icon name="mdi-plus" size="24px" color="primary" />
@@ -50,8 +62,10 @@ onMounted(async () => {
         />
       </q-card-section>
 
+      <form @submit.prevent.stop="onSubmit">
         <q-card-section class="q-gutter-x-md row">
           <q-select
+            ref="categoryRef"
             class="col-3"
             outlined
             dense
@@ -62,30 +76,35 @@ onMounted(async () => {
             option-value="value"
             option-label="label"
             label="หมวดหมู่"
+            lazy-rules
+            :rules="[
+              (val) => (val !== null && val !== '') || 'กรุณาเลือหมวดหมู่',
+            ]"
           />
           <q-input
+            ref="titleRef"
             class="col-grow"
             outlined
             dense
             v-model="title"
             label="ชื่อเรื่อง"
+            lazy-rules
+            :rules="[
+              (val) => (val && val.length > 0) || 'กรุณาเพิ่มชื่อเรื่อง',
+            ]"
           />
         </q-card-section>
 
         <q-card-actions align="right">
           <q-btn flat v-close-popup label="ยกเลิก" text-color="primary" />
           <q-btn
-          @click="
+            type="submit"
-            async () => {
-              await store.newIssue(title, categoryId);
-              isOpen = false;
-            }
-          "
             label="บันทึก"
             color="primary"
             text-color="white"
           />
         </q-card-actions>
+      </form>
     </q-card>
   </q-dialog>
 </template>