feat: ตรวจสอบข้อมูล

src/components/FormDialog.vue

@@ -89,7 +89,7 @@ onMounted(async () => {
 </script>
 <template>
   <q-dialog full-width v-model="modal">
-    <AppBox style="padding: 0; border-radius: var(--radius-2)">
+    <AppBox style="padding: 0; border-radius: var(--radius-2); max-width: 80%">
       <q-form greedy @submit.prevent @validation-success="submit">
         <!-- header -->
         <q-card-section class="form-header">
@@ -146,14 +146,22 @@ onMounted(async () => {
                 {{ $t(addressTitle || 'address') }}
               </div>
               <q-input
+                hide-bottom-space
                 dense
                 outlined
                 id="Addr"
-                label="ที่อยู่"
+                :label="$t('address')"
                 class="col-12"
                 v-model="address"
+                lazy-rules
+                :rules="[
+                  (val) =>
+                    (val && val.length > 0) ||
+                    $t('formDialogInputAddressValidate'),
+                ]"
               />
               <q-select
+                hide-bottom-space
                 dense
                 outlined
                 emit-value
@@ -162,12 +170,19 @@ onMounted(async () => {
                 v-model="provinceId"
                 option-value="id"
                 option-label="name"
-                label="จังหวัด"
+                :label="$t('province')"
                 class="col-3"
                 :options="addrOptions.provinceOps"
                 @update:model-value="(v: string) => selectProvince(v)"
+                lazy-rules
+                :rules="[
+                  (val) =>
+                    (val && val.length > 0) ||
+                    $t('formDialogInputProvinceValidate'),
+                ]"
               />
               <q-select
+                hide-bottom-space
                 dense
                 outlined
                 emit-value
@@ -176,12 +191,19 @@ onMounted(async () => {
                 v-model="districtId"
                 option-value="id"
                 option-label="name"
-                label="อำเภอ"
+                :label="$t('district')"
                 class="col-3"
                 :options="addrOptions.districtOps"
                 @update:model-value="(v: string) => selectDistrict(v)"
+                lazy-rules
+                :rules="[
+                  (val) =>
+                    (val && val.length > 0) ||
+                    $t('formDialogInputDistrictValidate'),
+                ]"
               />
               <q-select
+                hide-bottom-space
                 dense
                 outlined
                 emit-value
@@ -190,28 +212,41 @@ onMounted(async () => {
                 v-model="subDistrictId"
                 option-value="id"
                 option-label="name"
-                label="ตำบล"
+                :label="$t('subDistrict')"
                 class="col-3"
                 :options="addrOptions.subDistrictOps"
                 @update:model-value="(v: string) => selectSubDistrict(v)"
+                lazy-rules
+                :rules="[
+                  (val) =>
+                    (val && val.length > 0) ||
+                    $t('formDialogInputSubDistrictValidate'),
+                ]"
               />
               <q-input
                 dense
                 readonly
                 outlined
                 id="zip"
-                label="รหัสไปรษณีย์"
+                :label="$t('zipCode')"
                 class="col-3"
                 v-model="zipCode"
               />
               <span class="col-12">{{ $t(addressTitle || 'address') }} EN</span>
               <q-input
+                hide-bottom-space
                 dense
                 outlined
                 id="addressEN"
-                label="ที่อยู่"
+                :label="$t('address')"
                 class="col-12"
                 v-model="addressEN"
+                lazy-rules
+                :rules="[
+                  (val) =>
+                    (val && val.length > 0) ||
+                    $t('formDialogInputAddressValidate'),
+                ]"
               />
               <q-select
                 dense
@@ -222,7 +257,7 @@ onMounted(async () => {
                 v-model="provinceId"
                 option-value="id"
                 option-label="nameEN"
-                label="จังหวัด"
+                :label="$t('province')"
                 class="col-3"
                 :options="addrOptions.provinceOps"
                 @update:model-value="(v: string) => selectProvince(v)"
@@ -236,7 +271,7 @@ onMounted(async () => {
                 v-model="districtId"
                 option-value="id"
                 option-label="nameEN"
-                label="อำเภอ"
+                :label="$t('district')"
                 class="col-3"
                 :options="addrOptions.districtOps"
                 @update:model-value="(v: string) => selectDistrict(v)"
@@ -250,7 +285,7 @@ onMounted(async () => {
                 v-model="subDistrictId"
                 option-value="id"
                 option-label="nameEN"
-                label="ตำบล"
+                :label="$t('subDistrict')"
                 class="col-3"
                 :options="addrOptions.subDistrictOps"
                 @update:model-value="(v: string) => selectSubDistrict(v)"
@@ -260,7 +295,7 @@ onMounted(async () => {
                 readonly
                 outlined
                 zip="zipEN"
-                label="รหัสไปรษณีย์"
+                :label="$t('zipCode')"
                 class="col-3"
                 v-model="zipCode"
               />