feat: only validate field on submit only

src/components/01_branch-management/FormBranchContact.vue

@@ -22,6 +22,7 @@ defineProps<{
     </div>
     <div class="col-md-9 col-12 row q-col-gutter-md">
       <q-input
+        lazy-rules="ondemand"
         :dense="dense"
         outlined
         :readonly="readonly"
@@ -37,6 +38,7 @@ defineProps<{
       />
 
       <q-input
+        lazy-rules="ondemand"
         :dense="dense"
         outlined
         :readonly="readonly"
@@ -52,6 +54,7 @@ defineProps<{
       />
 
       <q-input
+        lazy-rules="ondemand"
         :dense="dense"
         outlined
         :readonly="readonly"
@@ -63,6 +66,7 @@ defineProps<{
       />
 
       <q-input
+        lazy-rules="ondemand"
         :dense="dense"
         outlined
         :readonly="readonly"
@@ -74,6 +78,7 @@ defineProps<{
       />
 
       <q-input
+        lazy-rules="ondemand"
         :dense="dense"
         outlined
         :readonly="readonly"

src/components/01_branch-management/FormBranchInformation.vue

@@ -22,6 +22,7 @@ defineProps<{
     </div>
     <div class="col-md-9 col-12 row q-col-gutter-md">
       <q-input
+        lazy-rules="ondemand"
         :dense="dense"
         outlined
         readonly
@@ -37,6 +38,7 @@ defineProps<{
       />
 
       <q-input
+        lazy-rules="ondemand"
         v-if="typeBranch !== 'headOffice'"
         :dense="dense"
         outlined
@@ -53,6 +55,7 @@ defineProps<{
       />
 
       <q-input
+        lazy-rules="ondemand"
         :dense="dense"
         outlined
         :readonly="readonly"
@@ -64,7 +67,6 @@ defineProps<{
         }"
         :label="$t('formDialogInputTaxNo')"
         v-model="taxNo"
-        lazy-rules
         :rules="[
           (val) =>
             (val && val.length === 13 && /[0-9]+/.test(val)) ||
@@ -74,6 +76,7 @@ defineProps<{
       />
 
       <q-input
+        lazy-rules="ondemand"
         :dense="dense"
         outlined
         :readonly="readonly"
@@ -85,7 +88,6 @@ defineProps<{
             : $t('formDialogInputNameSubBranch')
         "
         v-model="name"
-        lazy-rules
         :rules="[(val) => val && val.length > 0]"
         :error-message="
           typeBranch === 'headOffice'
@@ -96,6 +98,7 @@ defineProps<{
       />
 
       <q-input
+        lazy-rules="ondemand"
         :dense="dense"
         outlined
         :readonly="readonly"

src/components/02_personnel-management/FormAddress.vue

@@ -124,6 +124,7 @@ watch(districtId, fetchSubDistrict);
       </div>
       <div class="col-md-9 col-12 row q-col-gutter-md">
         <q-input
+          lazy-rules="ondemand"
           :for="`${prefixId}-${id !== undefined ? `input-address-${id}` : 'input-address'}`"
           :dense="dense"
           outlined
@@ -143,6 +144,7 @@ watch(districtId, fetchSubDistrict);
           "
         />
         <q-select
+          lazy-rules="ondemand"
           :id="`${prefixId}-${id !== undefined ? `select-province-${id}` : 'select-province'}`"
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
@@ -170,6 +172,7 @@ watch(districtId, fetchSubDistrict);
         />
 
         <q-select
+          lazy-rules="ondemand"
           :id="`${prefixId}-${id !== undefined ? `select-district-${id}` : 'select-district'}`"
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
@@ -196,6 +199,7 @@ watch(districtId, fetchSubDistrict);
           @update:model-value="subDistrictId = zipCode = null"
         />
         <q-select
+          lazy-rules="ondemand"
           :id="`${prefixId}-${id !== undefined ? `select-sub-district-${id}` : 'select-sub-district'}`"
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
@@ -222,6 +226,7 @@ watch(districtId, fetchSubDistrict);
           @update:model-value="(v: string) => selectSubDistrict(v)"
         />
         <q-input
+          lazy-rules="ondemand"
           :for="`${prefixId}-${id !== undefined ? `input-zip-code-${id}` : 'input-zip-code'}`"
           :dense="dense"
           outlined
@@ -239,6 +244,7 @@ watch(districtId, fetchSubDistrict);
       </div>
       <div class="col-md-9 col-12 row q-col-gutter-md">
         <q-input
+          lazy-rules="ondemand"
           :for="`${prefixId}-${id !== undefined ? `input-address-en-${id}` : 'input-address-en'}`"
           :dense="dense"
           :readonly="readonly || sameWithEmployer"
@@ -258,6 +264,7 @@ watch(districtId, fetchSubDistrict);
           "
         />
         <q-select
+          lazy-rules="ondemand"
           :id="`${prefixId}-${id !== undefined ? `select-province-en-${id}` : 'select-province-en'}`"
           hide-bottom-space
           :dense="dense"
@@ -284,6 +291,7 @@ watch(districtId, fetchSubDistrict);
           @update:model-value="districtId = subDistrictId = zipCode = null"
         />
         <q-select
+          lazy-rules="ondemand"
           :id="`${prefixId}-${id !== undefined ? `select-district-en-${id}` : 'select-district-en'}`"
           hide-bottom-space
           :dense="dense"
@@ -310,6 +318,7 @@ watch(districtId, fetchSubDistrict);
           @update:model-value="subDistrictId = zipCode = null"
         />
         <q-select
+          lazy-rules="ondemand"
           :id="`${prefixId}-${id !== undefined ? `select-sub-district-en-${id}` : 'select-sub-district-en'}`"
           hide-bottom-space
           :dense="dense"
@@ -336,6 +345,7 @@ watch(districtId, fetchSubDistrict);
           @update:model-value="(v: string) => selectSubDistrict(v)"
         />
         <q-input
+          lazy-rules="ondemand"
           hide-bottom-space
           :for="`${prefixId}-${id !== undefined ? `input-zip-code-${id}` : 'input-zip-code'}`"
           :dense="dense"

src/components/02_personnel-management/FormByType.vue

@@ -80,6 +80,7 @@ function deleteFile(name: string) {
         style="margin-left: 0px; padding-left: 0px"
       >
         <q-input
+          lazy-rules="ondemand"
           for="input-regis-no"
           :dense="dense"
           outlined
@@ -108,6 +109,7 @@ function deleteFile(name: string) {
           </template>
           <template #trigger>
             <q-input
+              lazy-rules="ondemand"
               for="input-start-date"
               :label="$t('formDialogInputStartDate')"
               :dense="dense"
@@ -170,6 +172,7 @@ function deleteFile(name: string) {
           </template>
           <template #trigger>
             <q-input
+              lazy-rules="ondemand"
               for="input-retire-date"
               :label="$t('formDialogInputRetireDate')"
               :dense="dense"
@@ -213,6 +216,7 @@ function deleteFile(name: string) {
           </template>
         </VueDatePicker>
         <q-select
+          lazy-rules="ondemand"
           id="input-responsible-area"
           v-if="userType === 'MESSENGER'"
           :dense="dense"
@@ -236,6 +240,7 @@ function deleteFile(name: string) {
         style="row-gap: 16px"
       >
         <q-input
+          lazy-rules="ondemand"
           for="input-discount-condition"
           :dense="dense"
           outlined
@@ -252,6 +257,7 @@ function deleteFile(name: string) {
         style="margin-left: 0px; padding-left: 0px"
       >
         <q-select
+          lazy-rules="ondemand"
           id="input-source-nationality"
           :dense="dense"
           outlined
@@ -268,6 +274,7 @@ function deleteFile(name: string) {
           :options="userStore.userOption.nationalityOpts"
         />
         <q-select
+          lazy-rules="ondemand"
           id="input-import-nationality"
           :dense="dense"
           outlined
@@ -284,6 +291,7 @@ function deleteFile(name: string) {
           :options="userStore.userOption.nationalityOpts"
         />
         <q-select
+          lazy-rules="ondemand"
           id="select-trainig-place"
           :dense="dense"
           outlined
@@ -300,6 +308,7 @@ function deleteFile(name: string) {
           :options="userStore.userOption.trainingPlaceOpts"
         />
         <q-input
+          lazy-rules="ondemand"
           for="input-checkpoint"
           :dense="dense"
           outlined
@@ -309,6 +318,7 @@ function deleteFile(name: string) {
           v-model="checkpoint"
         />
         <q-input
+          lazy-rules="ondemand"
           for="input-checkpoint-en"
           :dense="dense"
           outlined

src/components/02_personnel-management/FormInformation.vue

@@ -40,6 +40,7 @@ onMounted(async () => {
   </div>
   <div class="col-md-9 col-12 row q-col-gutter-md">
     <q-select
+      lazy-rules="ondemand"
       id="select-hq-id"
       :dense="dense"
       outlined
@@ -59,6 +60,7 @@ onMounted(async () => {
       @update:model-value="(val: string) => selectHq(val)"
     />
     <q-select
+      lazy-rules="ondemand"
       id="select-br-id"
       :dense="dense"
       outlined
@@ -77,6 +79,7 @@ onMounted(async () => {
       :options="userStore.userOption.brOpts"
     />
     <q-input
+      lazy-rules="ondemand"
       for="input-username"
       :dense="dense"
       outlined
@@ -94,6 +97,7 @@ onMounted(async () => {
       ]"
     />
     <q-select
+      lazy-rules="ondemand"
       id="select-user-type"
       :dense="dense"
       outlined
@@ -123,6 +127,7 @@ onMounted(async () => {
       </template>
     </q-select>
     <q-select
+      lazy-rules="ondemand"
       id="select-user-role"
       :dense="dense"
       outlined
@@ -140,7 +145,7 @@ onMounted(async () => {
       :options="userStore.userOption.roleOpts"
       :rules="[(val: string) => !!val || $t('formDialogInputUserRoleValidate')]"
     />
-    <!-- <q-input
+    <!-- <q-input lazy-rules="ondemand"
       id="input-user-code"
       :dense="dense"
       :outlined="readonly ? false : outlined"

src/components/02_personnel-management/FormPerson.vue

@@ -37,6 +37,7 @@ defineProps<{
   </div>
   <div class="col-md-9 col-12 row q-col-gutter-md">
     <q-input
+      lazy-rules="ondemand"
       :for="`${prefixId}-input-first-name`"
       :dense="dense"
       outlined
@@ -50,6 +51,7 @@ defineProps<{
       ]"
     />
     <q-input
+      lazy-rules="ondemand"
       :for="`${prefixId}-input-last-name`"
       :dense="dense"
       outlined
@@ -61,6 +63,7 @@ defineProps<{
       :rules="[(val: string) => !!val || $t('formDialogInputLastNameValidate')]"
     />
     <q-input
+      lazy-rules="ondemand"
       :for="`${prefixId}-input-first-name-en`"
       :dense="dense"
       outlined
@@ -74,6 +77,7 @@ defineProps<{
       ]"
     />
     <q-input
+      lazy-rules="ondemand"
       :for="`${prefixId}-input-last-name-en`"
       :dense="dense"
       outlined
@@ -87,6 +91,7 @@ defineProps<{
       ]"
     />
     <q-input
+      lazy-rules="ondemand"
       v-if="!employee"
       :for="`${prefixId}-input-telephone`"
       :dense="dense"
@@ -98,6 +103,7 @@ defineProps<{
       mask="##########"
     />
     <q-input
+      lazy-rules="ondemand"
       v-if="!employee"
       :for="`${prefixId}-input-email`"
       :dense="dense"
@@ -108,6 +114,7 @@ defineProps<{
       v-model="email"
     />
     <q-select
+      lazy-rules="ondemand"
       v-if="!employee"
       :id="`${prefixId}-select-gender`"
       :dense="dense"
@@ -146,6 +153,7 @@ defineProps<{
       </template>
       <template #trigger>
         <q-input
+          lazy-rules="ondemand"
           :for="`${prefixId}-input-birth-date`"
           hide-bottom-space
           placeholder="DD/MM/YYYY"
@@ -186,6 +194,7 @@ defineProps<{
       </template>
     </VueDatePicker>
     <q-input
+      lazy-rules="ondemand"
       :for="`${prefixId}-input-age`"
       :dense="dense"
       outlined
@@ -200,6 +209,7 @@ defineProps<{
       "
     />
     <q-select
+      lazy-rules="ondemand"
       v-if="employee"
       :id="`${prefixId}-select-gender`"
       hide-bottom-space
@@ -221,6 +231,7 @@ defineProps<{
       ]"
     />
     <q-select
+      lazy-rules="ondemand"
       v-if="employee"
       :id="`${prefixId}-select-nationality`"
       hide-bottom-space

src/components/03_customer-management/AboutComponent.vue

@@ -28,6 +28,7 @@ const branchNo = defineModel<number>('branchNo');
     <div class="col-md-3 col-12 app-text-muted">• {{ $t(`about`) }}</div>
     <div class="col-md-9 col-12 row q-col-gutter-md">
       <q-input
+        lazy-rules="ondemand"
         :for="`${prefixId}-input-branch-code`"
         :id="`${prefixId}-input-branch-code`"
         v-if="typeCustomer === 'PERS'"
@@ -41,6 +42,7 @@ const branchNo = defineModel<number>('branchNo');
       />
 
       <q-input
+        lazy-rules="ondemand"
         :for="`${prefixId}-input-branch-no`"
         :id="`${prefixId}-input-branch-no`"
         :dense="dense"
@@ -53,6 +55,7 @@ const branchNo = defineModel<number>('branchNo');
       />
 
       <q-input
+        lazy-rules="ondemand"
         :for="`${prefixId}-input-customer-name`"
         :id="`${prefixId}-input-customer-name`"
         v-if="typeCustomer === 'PERS'"
@@ -66,6 +69,7 @@ const branchNo = defineModel<number>('branchNo');
       />
 
       <q-input
+        lazy-rules="ondemand"
         :for="`${prefixId}-input-customer-english-name`"
         :id="`${prefixId}-input-customer-english-name`"
         v-if="typeCustomer === 'PERS'"
@@ -80,6 +84,7 @@ const branchNo = defineModel<number>('branchNo');
 
       <div class="row q-col-gutter-md">
         <q-input
+          lazy-rules="ondemand"
           :for="`${prefixId}-input-branch-code`"
           :id="`${prefixId}-input-branch-code`"
           v-if="typeCustomer === 'CORP'"
@@ -92,6 +97,7 @@ const branchNo = defineModel<number>('branchNo');
           v-model="branchCode"
         />
         <q-input
+          lazy-rules="ondemand"
           :for="`${prefixId}-input-legal-entity-code`"
           :id="`${prefixId}-input-legal-entity-code`"
           v-if="typeCustomer === 'CORP'"
@@ -105,6 +111,7 @@ const branchNo = defineModel<number>('branchNo');
         />
 
         <q-input
+          lazy-rules="ondemand"
           :for="`${prefixId}-input-customer-english-name`"
           :id="`${prefixId}-input-customer-english-name`"
           v-if="typeCustomer === 'CORP'"
@@ -118,6 +125,7 @@ const branchNo = defineModel<number>('branchNo');
         />
 
         <q-input
+          lazy-rules="ondemand"
           :for="`${prefixId}-input-customer-name`"
           :id="`${prefixId}-input-customer-name`"
           v-if="typeCustomer === 'CORP'"
@@ -132,6 +140,7 @@ const branchNo = defineModel<number>('branchNo');
       </div>
 
       <q-input
+        lazy-rules="ondemand"
         :for="`${prefixId}-input-tax-no`"
         :id="`${prefixId}-input-tax-no`"
         v-if="typeCustomer === 'CORP'"
@@ -149,6 +158,7 @@ const branchNo = defineModel<number>('branchNo');
         ]"
       />
       <q-input
+        lazy-rules="ondemand"
         :for="`${prefixId}-input-register-name`"
         :id="`${prefixId}-input-register-name`"
         v-if="typeCustomer === 'CORP'"
@@ -161,6 +171,7 @@ const branchNo = defineModel<number>('branchNo');
         v-model="registerName"
       />
       <q-input
+        lazy-rules="ondemand"
         :for="`${prefixId}-input-authorized-capital`"
         :id="`${prefixId}-input-authorized-capital`"
         v-if="typeCustomer === 'CORP'"
@@ -193,6 +204,7 @@ const branchNo = defineModel<number>('branchNo');
         </template>
         <template #trigger>
           <q-input
+            lazy-rules="ondemand"
             :for="`${prefixId}-input-start-date`"
             :id="`${prefixId}-input-start-date`"
             :label="$t('registerDate')"

src/components/03_customer-management/BasicInformation.vue

@@ -47,6 +47,7 @@ defineEmits<{
   </div>
   <div v-if="!employee" class="col-md-9 col-12 row q-col-gutter-md">
     <q-select
+      lazy-rules="ondemand"
       :id="`${prefixId}-input-source-nationality`"
       :dense="dense"
       outlined
@@ -75,6 +76,7 @@ defineEmits<{
     />
 
     <q-input
+      lazy-rules="ondemand"
       :for="`${prefixId}-input-employer-id`"
       :id="`${prefixId}-input-employer-id`"
       v-if="typeCustomer === 'PERS'"
@@ -87,6 +89,7 @@ defineEmits<{
       v-model="personName"
     />
     <q-input
+      lazy-rules="ondemand"
       :for="`${prefixId}-input-tax-no`"
       :id="`${prefixId}-input-tax-no`"
       v-if="typeCustomer === 'PERS'"
@@ -105,6 +108,7 @@ defineEmits<{
     />
 
     <q-input
+      lazy-rules="ondemand"
       :for="`${prefixId}-input-customer-name`"
       :id="`${prefixId}-input-customer-name`"
       :dense="dense"
@@ -118,6 +122,7 @@ defineEmits<{
       v-model="customerName"
     />
     <q-input
+      lazy-rules="ondemand"
       :for="`${prefixId}-input-customer-name-en`"
       :id="`${prefixId}-input-customer-name-en`"
       :dense="dense"
@@ -136,6 +141,7 @@ defineEmits<{
     />
 
     <q-input
+      lazy-rules="ondemand"
       v-if="typeCustomer !== 'PERS'"
       :for="`${prefixId}-input-owner-name`"
       :dense="dense"
@@ -150,6 +156,7 @@ defineEmits<{
 
   <div v-if="employee" class="col-md-9 col-12 row q-col-gutter-md">
     <q-select
+      lazy-rules="ondemand"
       :for="`${prefixId}-select-employer-branch`"
       :use-input="!customerBranch"
       input-debounce="0"
@@ -354,6 +361,7 @@ defineEmits<{
       </template>
     </q-select>
     <q-input
+      lazy-rules="ondemand"
       :for="`${prefixId}-input-employee-id`"
       :dense="dense"
       outlined
@@ -365,6 +373,7 @@ defineEmits<{
     />
 
     <q-input
+      lazy-rules="ondemand"
       v-if="readonly && !nrcNo"
       :for="`${prefixId}-input-nrc-no`"
       :dense="dense"
@@ -376,6 +385,7 @@ defineEmits<{
       v-model="slash"
     />
     <q-input
+      lazy-rules="ondemand"
       v-else
       mask="## #### ###### #"
       :for="`${prefixId}-input-nrc-no`"

src/components/03_customer-management/ContactInformation.vue

@@ -19,6 +19,7 @@ const telephone = defineModel<string>('telephone');
     </div>
     <div class="col-md-9 col-12 row q-col-gutter-md">
       <q-input
+        lazy-rules="ondemand"
         :for="`${prefixId}-input-mail`"
         :id="`${prefixId}-input-mail`"
         :dense="dense"
@@ -30,6 +31,7 @@ const telephone = defineModel<string>('telephone');
         v-model="mail"
       />
       <q-input
+        lazy-rules="ondemand"
         :for="`${prefixId}-input-telephone`"
         :id="`${prefixId}-input-telephone`"
         :dense="dense"

src/components/03_customer-management/CustomerInfoComponent.vue

@@ -138,6 +138,7 @@ watch(currentStatus, async () => {
         class="row items-center justify-end q-px-md col-12 col-sm q-py-sm no-wrap"
       >
         <q-input
+          lazy-rules="ondemand"
           outlined
           dense
           class="col-6"

src/components/03_customer-management/FormBusiness.vue

@@ -54,6 +54,7 @@ onMounted(async () => {
     </div>
     <div class="col-md-9 col-12 row q-col-gutter-md">
       <q-input
+        lazy-rules="ondemand"
         :for="`${prefixId}-input-employment-office`"
         :id="`${prefixId}-input-employment-office`"
         :dense="dense"
@@ -66,6 +67,7 @@ onMounted(async () => {
       />
 
       <q-select
+        lazy-rules="ondemand"
         :id="`${prefixId}-select-business-type`"
         emit-value
         option-value="value"
@@ -81,6 +83,7 @@ onMounted(async () => {
       />
 
       <q-input
+        lazy-rules="ondemand"
         :for="`${prefixId}-input-bussiness-type-en`"
         :id="`${prefixId}-input-bussiness-type-en`"
         :dense="dense"
@@ -93,6 +96,7 @@ onMounted(async () => {
       />
 
       <q-select
+        lazy-rules="ondemand"
         :for="`${prefixId}-select-job-position`"
         :id="`${prefixId}-select-job-position`"
         emit-value
@@ -109,6 +113,7 @@ onMounted(async () => {
       />
 
       <q-input
+        lazy-rules="ondemand"
         :for="`${prefixId}-input-job-position-en`"
         :id="`${prefixId}-input-job-position-en`"
         :dense="dense"
@@ -121,6 +126,7 @@ onMounted(async () => {
       />
 
       <q-input
+        lazy-rules="ondemand"
         :for="`${prefixId}-input-job-description`"
         :id="`${prefixId}-input-job-description`"
         :dense="dense"
@@ -152,6 +158,7 @@ onMounted(async () => {
         </template>
         <template #trigger>
           <q-input
+            lazy-rules="ondemand"
             :for="`${prefixId}-input-start-date`"
             :id="`${prefixId}-input-start-date`"
             :label="$t('payDay')"
@@ -197,6 +204,7 @@ onMounted(async () => {
       </VueDatePicker>
 
       <q-input
+        lazy-rules="ondemand"
         :for="`${prefixId}-input-pay-rate`"
         :id="`${prefixId}-input-pay-rate`"
         :dense="dense"
@@ -209,6 +217,7 @@ onMounted(async () => {
       />
 
       <q-input
+        lazy-rules="ondemand"
         :for="`${prefixId}-input-sales-person`"
         :id="`${prefixId}-input-sales-person`"
         :dense="dense"

src/components/03_customer-management/FormEmployeeHealthCheck.vue

@@ -146,6 +146,7 @@ onMounted(async () => {
         </div>
         <div class="col-md-9 col-12 row q-col-gutter-md">
           <q-input
+            lazy-rules="ondemand"
             :dense="dense"
             outlined
             :readonly="readonly"
@@ -155,6 +156,7 @@ onMounted(async () => {
             v-model="checkup.checkupResult"
           />
           <q-select
+            lazy-rules="ondemand"
             :id="`${prefixId}-select-province`"
             :dense="dense"
             :readonly="readonly"
@@ -169,9 +171,9 @@ onMounted(async () => {
             :label="$t('formDialogInputCheckupType')"
             class="col-6"
             :options="checkupTypeOption"
-            lazy-rules
           />
           <q-select
+            lazy-rules="ondemand"
             :id="`${prefixId}-select-province`"
             :dense="dense"
             :readonly="readonly"
@@ -186,9 +188,9 @@ onMounted(async () => {
             :label="$t('province')"
             class="col-md-3 col-6"
             :options="addrOptions.provinceOps"
-            lazy-rules
           />
           <q-input
+            lazy-rules="ondemand"
             :dense="dense"
             outlined
             :readonly="readonly"
@@ -198,6 +200,7 @@ onMounted(async () => {
             v-model="checkup.hospitalName"
           />
           <q-input
+            lazy-rules="ondemand"
             :label="$t('formDialogInputRemark')"
             :dense="dense"
             outlined
@@ -208,6 +211,7 @@ onMounted(async () => {
             type="textarea"
           />
           <q-select
+            lazy-rules="ondemand"
             :id="`${prefixId}-select-province`"
             :dense="dense"
             :readonly="readonly"
@@ -222,9 +226,9 @@ onMounted(async () => {
             :label="$t('formDialogInputMedicalBenefit')"
             class="col-6"
             :options="medicalBenefitOption"
-            lazy-rules
           />
           <q-select
+            lazy-rules="ondemand"
             :id="`${prefixId}-select-province`"
             :dense="dense"
             :readonly="readonly"
@@ -239,7 +243,6 @@ onMounted(async () => {
             :label="$t('formDialogInputInsuranceCompany')"
             class="col-6"
             :options="insuranceCompanyOption"
-            lazy-rules
           />
           <VueDatePicker
             utc
@@ -260,6 +263,7 @@ onMounted(async () => {
             </template>
             <template #trigger>
               <q-input
+                lazy-rules="ondemand"
                 :id="`${prefixId}-input-birth-date`"
                 :label="$t('formDialogInputCoverageStartDate')"
                 :dense="dense"
@@ -326,6 +330,7 @@ onMounted(async () => {
             </template>
             <template #trigger>
               <q-input
+                lazy-rules="ondemand"
                 id="input-birth-date"
                 :label="$t('formDialogInputCoverageExpiretDate')"
                 :dense="dense"

src/components/03_customer-management/FormEmployeeOther.vue

@@ -21,6 +21,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
       <div v-if="$q.screen.gt.sm" class="col-3 q-pl-xl"></div>
       <div class="col-md-9 col-12 row q-col-gutter-md">
         <q-input
+          lazy-rules="ondemand"
           :for="`${prefixId}-input-citizen-id`"
           :dense="dense"
           outlined
@@ -29,7 +30,6 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :label="$t('formDialogInputCitizenId')"
           class="col"
           v-model="employeeOther.citizenId"
-          lazy-rules
         />
       </div>
       <div
@@ -40,6 +40,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
       </div>
       <div class="col-md-9 col-12 row q-col-gutter-md">
         <q-input
+          lazy-rules="ondemand"
           :for="`${prefixId}-input-father-first-name`"
           :dense="dense"
           outlined
@@ -50,6 +51,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           v-model="employeeOther.fatherFirstName"
         />
         <q-input
+          lazy-rules="ondemand"
           :for="`${prefixId}-input-father-last-name`"
           :dense="dense"
           outlined
@@ -60,6 +62,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           v-model="employeeOther.fatherLastName"
         />
         <q-input
+          lazy-rules="ondemand"
           :for="`${prefixId}-input-father-first-name-en`"
           :dense="dense"
           outlined
@@ -70,6 +73,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           v-model="employeeOther.fatherFirstNameEN"
         />
         <q-input
+          lazy-rules="ondemand"
           :for="`${prefixId}-input-father-last-name-en`"
           :dense="dense"
           outlined
@@ -80,6 +84,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           v-model="employeeOther.fatherLastNameEN"
         />
         <q-input
+          lazy-rules="ondemand"
           :for="`${prefixId}-input-father-birthplace`"
           :dense="dense"
           outlined
@@ -99,6 +104,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
       </div>
       <div class="col-md-9 col-12 row q-col-gutter-md">
         <q-input
+          lazy-rules="ondemand"
           :for="`${prefixId}-input-mother-first-name`"
           :dense="dense"
           outlined
@@ -109,6 +115,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           v-model="employeeOther.motherFirstName"
         />
         <q-input
+          lazy-rules="ondemand"
           :for="`${prefixId}-input-mother-last-name`"
           :dense="dense"
           outlined
@@ -119,6 +126,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           v-model="employeeOther.motherLastName"
         />
         <q-input
+          lazy-rules="ondemand"
           :for="`${prefixId}-input-mother-first-name-en`"
           :dense="dense"
           outlined
@@ -129,6 +137,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           v-model="employeeOther.motherFirstNameEN"
         />
         <q-input
+          lazy-rules="ondemand"
           :for="`${prefixId}-input-mother-last-name-en`"
           :dense="dense"
           outlined
@@ -139,6 +148,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           v-model="employeeOther.motherLastNameEN"
         />
         <q-input
+          lazy-rules="ondemand"
           :for="`${prefixId}-input-mother-birthplace`"
           :dense="dense"
           outlined

src/components/03_customer-management/FormEmployeePassport.vue

@@ -39,6 +39,7 @@ defineProps<{
   </div>
   <div class="col-md-9 col-12 row q-col-gutter-md">
     <q-select
+      lazy-rules="ondemand"
       :id="`${prefixId}-select-passport-type`"
       :dense="dense"
       :readonly="readonly"
@@ -53,13 +54,13 @@ defineProps<{
       :label="$t('formDialogInputPassportType')"
       class="col-md-3 col-12"
       :options="passportTypeOption"
-      lazy-rules
       :rules="[
         (val: string) =>
           !!val || $t('selectValidate') + $t('formDialogInputPassportType'),
       ]"
     />
     <q-input
+      lazy-rules="ondemand"
       :for="`${prefixId}-input-passport-no`"
       :dense="dense"
       outlined
@@ -74,6 +75,7 @@ defineProps<{
       ]"
     />
     <q-input
+      lazy-rules="ondemand"
       :for="`${prefixId}-input-passport-ref`"
       :dense="dense"
       outlined
@@ -84,6 +86,7 @@ defineProps<{
       v-model="previousPassportReference"
     />
     <q-input
+      lazy-rules="ondemand"
       :for="`${prefixId}-input-passport-place`"
       :dense="dense"
       outlined
@@ -98,6 +101,7 @@ defineProps<{
       ]"
     />
     <q-select
+      lazy-rules="ondemand"
       :id="`${prefixId}-select-passport-country`"
       :dense="dense"
       :readonly="readonly"
@@ -112,7 +116,6 @@ defineProps<{
       :label="$t('formDialogInputPassportCountry')"
       class="col-md-3 col-6"
       :options="passportIssuingCountryOption"
-      lazy-rules
       :rules="[
         (val: string) =>
           !!val || $t('selectValidate') + $t('formDialogInputPassportCountry'),
@@ -138,6 +141,7 @@ defineProps<{
       </template>
       <template #trigger>
         <q-input
+          lazy-rules="ondemand"
           :id="`${prefixId}-input-birth-date`"
           hide-bottom-space
           :label="$t('formDialogInputPassportIssuance')"
@@ -195,6 +199,7 @@ defineProps<{
       </template>
       <template #trigger>
         <q-input
+          lazy-rules="ondemand"
           :id="`${prefixId}-input-birth-date`"
           hide-bottom-space
           :label="$t('formDialogInputPassportExpire')"

src/components/03_customer-management/FormEmployeeVisa.vue

@@ -62,6 +62,7 @@ onMounted(async () => {
   </div>
   <div class="col-md-9 col-12 row q-col-gutter-md">
     <q-select
+      lazy-rules="ondemand"
       :id="`${prefixId}-select-visa-type`"
       :dense="dense"
       :readonly="readonly"
@@ -76,13 +77,13 @@ onMounted(async () => {
       :label="$t('formDialogInputVisaType')"
       class="col-md-3 col-6"
       :options="visaTypeOption"
-      lazy-rules
     />
     <!-- :rules="[
         (val: string) =>
           !!val || $t('selectValidate') + $t('formDialogInputVisaType'),
       ]" -->
     <q-input
+      lazy-rules="ondemand"
       :for="`${prefixId}-input-visa-no`"
       :dense="dense"
       outlined
@@ -116,6 +117,7 @@ onMounted(async () => {
       </template>
       <template #trigger>
         <q-input
+          lazy-rules="ondemand"
           :id="`${prefixId}-input-birth-date`"
           hide-bottom-space
           :label="$t('formDialogInputVisaIssuance')"
@@ -183,6 +185,7 @@ onMounted(async () => {
       </template>
       <template #trigger>
         <q-input
+          lazy-rules="ondemand"
           :id="`${prefixId}-input-birth-date`"
           hide-bottom-space
           :label="$t('formDialogInputVisaExpire')"
@@ -231,6 +234,7 @@ onMounted(async () => {
       </template>
     </VueDatePicker>
     <q-input
+      lazy-rules="ondemand"
       :for="`${prefixId}-input-visa-place`"
       :dense="dense"
       outlined
@@ -264,6 +268,7 @@ onMounted(async () => {
       </template>
       <template #trigger>
         <q-input
+          lazy-rules="ondemand"
           :id="`${prefixId}-input-birth-date`"
           hide-bottom-space
           :label="$t('formDialogInputVisaStayUntil')"
@@ -313,6 +318,7 @@ onMounted(async () => {
       </template>
     </VueDatePicker>
     <q-input
+      lazy-rules="ondemand"
       :for="`${prefixId}-input-tm6`"
       :dense="dense"
       outlined
@@ -346,6 +352,7 @@ onMounted(async () => {
       </template>
       <template #trigger>
         <q-input
+          lazy-rules="ondemand"
           :id="`${prefixId}-input-birth-date`"
           :label="$t('formDialogInputVisaEnter')"
           :dense="dense"

src/components/03_customer-management/FormEmployeeWorkHistory.vue

@@ -119,6 +119,7 @@ onMounted(async () => {
         </div>
         <div class="col-md-9 col-12 row q-col-gutter-md">
           <q-input
+            lazy-rules="ondemand"
             :for="`${prefixId}-input-owner-name`"
             :dense="dense"
             outlined
@@ -129,6 +130,7 @@ onMounted(async () => {
             v-model="work.ownerName"
           />
           <q-select
+            lazy-rules="ondemand"
             :id="`${prefixId}-select-position-name`"
             :dense="dense"
             :readonly="readonly"
@@ -143,9 +145,9 @@ onMounted(async () => {
             :label="$t('formDialogInputJobPosition')"
             class="col-6"
             :options="positionNameOption"
-            lazy-rules
           />
           <q-select
+            lazy-rules="ondemand"
             :id="`${prefixId}-select-job-type`"
             :dense="dense"
             :readonly="readonly"
@@ -160,9 +162,9 @@ onMounted(async () => {
             :label="$t('formDialogInputJobType')"
             class="col-6"
             :options="jobTypeOption"
-            lazy-rules
           />
           <q-select
+            lazy-rules="ondemand"
             :id="`${prefixId}-select-province`"
             :dense="dense"
             :readonly="readonly"
@@ -177,9 +179,9 @@ onMounted(async () => {
             :label="$t('formDialogInputWorkPlace')"
             class="col-6"
             :options="workplaceOption"
-            lazy-rules
           />
           <q-input
+            lazy-rules="ondemand"
             :for="`${prefixId}-input-work-end-date`"
             :label="$t('formDialogInputRemark')"
             :dense="dense"
@@ -210,6 +212,7 @@ onMounted(async () => {
             </template>
             <template #trigger>
               <q-input
+                lazy-rules="ondemand"
                 :id="`${prefixId}-input-birth-date`"
                 :label="$t('formDialogInputWorkUntil')"
                 :dense="dense"
@@ -253,6 +256,7 @@ onMounted(async () => {
             </template>
           </VueDatePicker>
           <q-input
+            lazy-rules="ondemand"
             :for="`${prefixId}-input-work-permit-no`"
             :dense="dense"
             outlined
@@ -282,6 +286,7 @@ onMounted(async () => {
             </template>
             <template #trigger>
               <q-input
+                lazy-rules="ondemand"
                 :id="`${prefixId}-input-birth-date`"
                 :label="$t('formDialogInputWorkPermitIssueDate')"
                 :dense="dense"
@@ -344,6 +349,7 @@ onMounted(async () => {
             </template>
             <template #trigger>
               <q-input
+                lazy-rules="ondemand"
                 :id="`${prefixId}-input-birth-date`"
                 :label="$t('formDialogInputWorkPermitExpireDate')"
                 :dense="dense"

src/components/04_product-service/BasicInfoProduct.vue

@@ -46,6 +46,7 @@ onMounted(async () => {
 
   <div class="col-9 row q-col-gutter-md">
     <q-select
+      lazy-rules="ondemand"
       id="select-br-id"
       :dense="dense"
       outlined
@@ -66,6 +67,7 @@ onMounted(async () => {
     />
 
     <q-select
+      lazy-rules="ondemand"
       id="input-source-nationality"
       :dense="dense"
       outlined
@@ -94,6 +96,7 @@ onMounted(async () => {
     />
 
     <q-input
+      lazy-rules="ondemand"
       for="input-name"
       :dense="dense"
       outlined
@@ -106,6 +109,7 @@ onMounted(async () => {
     />
 
     <q-input
+      lazy-rules="ondemand"
       for="input-detail"
       :dense="dense"
       outlined
@@ -150,6 +154,7 @@ onMounted(async () => {
     </div>
 
     <q-input
+      lazy-rules="ondemand"
       for="input-process"
       :dense="dense"
       outlined

src/components/04_product-service/BasicInformation.vue

@@ -32,6 +32,7 @@ const props = defineProps<{
   </div>
   <div v-if="!service" class="col-9 row q-col-gutter-md">
     <q-input
+      lazy-rules="ondemand"
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -44,6 +45,7 @@ const props = defineProps<{
       :rules="[(val: string) => !!val || $t('pleaseInformation')]"
     />
     <q-input
+      lazy-rules="ondemand"
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -54,6 +56,7 @@ const props = defineProps<{
       v-model="detail"
     />
     <q-input
+      lazy-rules="ondemand"
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -67,6 +70,7 @@ const props = defineProps<{
 
   <div v-if="service" class="col-9 row q-col-gutter-md">
     <q-input
+      lazy-rules="ondemand"
       id="input-service-code"
       for="input-service-code"
       :dense="dense"
@@ -80,6 +84,7 @@ const props = defineProps<{
     />
 
     <q-select
+      lazy-rules="ondemand"
       id="input-source-nationality"
       :dense="dense"
       outlined
@@ -108,6 +113,7 @@ const props = defineProps<{
     />
 
     <q-input
+      lazy-rules="ondemand"
       id="input-service-name"
       for="input-service-name"
       :dense="dense"
@@ -119,6 +125,7 @@ const props = defineProps<{
       v-model="serviceName"
     />
     <q-input
+      lazy-rules="ondemand"
       id="input-service-description"
       for="input-service-description"
       :dense="dense"

src/components/04_product-service/PriceDataComponent.vue

@@ -16,6 +16,7 @@ defineProps<{
   <div class="col-3 app-text-muted">• {{ $t('priceInformation') }}</div>
   <div class="col-9 row q-col-gutter-md">
     <q-input
+      lazy-rules="ondemand"
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -28,6 +29,7 @@ defineProps<{
     />
 
     <q-input
+      lazy-rules="ondemand"
       :dense="dense"
       outlined
       :readonly="readonly"
@@ -40,6 +42,7 @@ defineProps<{
     />
 
     <q-input
+      lazy-rules="ondemand"
       :dense="dense"
       outlined
       :readonly="readonly"

src/components/04_product-service/ServiceProperties.vue

@@ -352,6 +352,7 @@ function confirmDelete(items: unknown[], index: number) {
 
           <!-- field name -->
           <q-select
+            lazy-rules="ondemand"
             dense
             outlined
             emit-value
@@ -380,6 +381,7 @@ function confirmDelete(items: unknown[], index: number) {
         <!-- type -->
         <div class="col">
           <q-select
+            lazy-rules="ondemand"
             dense
             outlined
             emit-value
@@ -483,6 +485,7 @@ function confirmDelete(items: unknown[], index: number) {
                       {{ $t('telephone') }}
                     </div>
                     <q-input
+                      lazy-rules="ondemand"
                       v-if="p.type === 'string'"
                       v-model="p.phoneNumberLength"
                       input-class="text-caption"
@@ -515,6 +518,7 @@ function confirmDelete(items: unknown[], index: number) {
                       {{ $t('decimal') }}
                     </div>
                     <q-input
+                      lazy-rules="ondemand"
                       v-model="p.decimalPlace"
                       class="col additional-label"
                       :class="{ 'q-mt-xs': $q.screen.lt.md }"
@@ -534,6 +538,7 @@ function confirmDelete(items: unknown[], index: number) {
                   >
                     <div class="col rounded">
                       <q-input
+                        lazy-rules="ondemand"
                         v-model="p.options[i]"
                         class="col additional-label"
                         dense

src/components/04_product-service/WorkNameManagement.vue

@@ -61,6 +61,7 @@ watch(
           :key="index"
         >
           <q-input
+            lazy-rules="ondemand"
             ref="inputName"
             :for="`input-work-name-${index}`"
             dense

src/pages/01_branch-management/MainPage.vue

@@ -948,6 +948,7 @@ watch(currentHq, () => {
                   class="row q-py-sm q-px-md justify-between full-width surface-3 bordered-b"
                 >
                   <q-input
+                    lazy-rules="ondemand"
                     for="input-search"
                     outlined
                     dense
@@ -967,6 +968,7 @@ watch(currentHq, () => {
                     :class="{ 'q-pt-xs': $q.screen.lt.md }"
                   >
                     <q-select
+                      lazy-rules="ondemand"
                       v-model="statusFilter"
                       outlined
                       dense
@@ -987,6 +989,7 @@ watch(currentHq, () => {
                     ></q-select>
 
                     <q-select
+                      lazy-rules="ondemand"
                       id="select-field"
                       for="select-field"
                       :options="

src/pages/02_personnel-management/MainPage.vue

@@ -784,6 +784,7 @@ watch(
         >
           <div class="row q-py-sm q-px-md justify-between full-width">
             <q-input
+              lazy-rules="ondemand"
               for="input-search"
               outlined
               dense
@@ -804,6 +805,7 @@ watch(
               style="white-space: nowrap"
             >
               <q-select
+                lazy-rules="ondemand"
                 v-model="statusFilter"
                 outlined
                 dense
@@ -821,6 +823,7 @@ watch(
               ></q-select>
 
               <q-select
+                lazy-rules="ondemand"
                 v-if="!modeView"
                 id="select-field"
                 for="select-field"

src/pages/03_customer-management/MainPage.vue

@@ -1764,6 +1764,7 @@ watch(isMainPage, () => {
             class="row q-px-md q-py-sm justify-between full-width surface-3 bordered-b"
           >
             <q-input
+              lazy-rules="ondemand"
               for="input-search"
               outlined
               dense
@@ -1784,6 +1785,7 @@ watch(isMainPage, () => {
               style="white-space: nowrap"
             >
               <q-select
+                lazy-rules="ondemand"
                 id="select-status"
                 for="select-status"
                 v-model="currentStatus"
@@ -1802,6 +1804,7 @@ watch(isMainPage, () => {
                 ]"
               ></q-select>
               <q-select
+                lazy-rules="ondemand"
                 id="select-field"
                 v-if="modeView === false"
                 for="select-field"

src/pages/04_product-service/MainPage.vue

@@ -1799,6 +1799,7 @@ watch(
                 class="row q-py-sm q-px-md justify-between full-width surface-3 bordered-b"
               >
                 <q-input
+                  lazy-rules="ondemand"
                   for="input-search"
                   outlined
                   :class="{ 'col-12': $q.screen.lt.md }"
@@ -1820,6 +1821,7 @@ watch(
                   style="white-space: nowrap"
                 >
                   <q-select
+                    lazy-rules="ondemand"
                     v-model="currentStatus"
                     for="select-status"
                     outlined
@@ -1841,6 +1843,7 @@ watch(
                   ></q-select>
 
                   <q-select
+                    lazy-rules="ondemand"
                     v-if="modeView === false"
                     id="select-field"
                     for="select-field"
@@ -2472,6 +2475,7 @@ watch(
                 class="row justify-between items-center q-px-md q-py-sm surface-3 bordered-b"
               >
                 <q-input
+                  lazy-rules="ondemand"
                   :class="{ 'col-12': $q.screen.lt.md }"
                   outlined
                   dense
@@ -2492,6 +2496,7 @@ watch(
                   style="white-space: nowrap"
                 >
                   <q-select
+                    lazy-rules="ondemand"
                     v-model="currentStatus"
                     outlined
                     dense
@@ -2513,6 +2518,7 @@ watch(
                   ></q-select>
 
                   <q-select
+                    lazy-rules="ondemand"
                     v-if="modeView === false"
                     :hide-dropdown-icon="$q.screen.lt.sm"
                     id="select-field"
@@ -3321,6 +3327,7 @@ watch(
       <div class="row items-center">
         <q-space />
         <q-input
+          lazy-rules="ondemand"
           id="input-search-add-product"
           outlined
           style="width: 250px"

src/pages/05_quotation/QuatationForm.vue

@@ -24,6 +24,7 @@ const toggleWorker = ref(true);
     <div class="row q-pa-md items-center">
       <div style="flex: 1"><q-img src="/logo.png" width="8rem" /></div>
       <q-select
+        lazy-rules="ondemand"
         v-model="selectedBranchIssuer"
         :options="[{ label: 'Issuer 1', value: 'Issuer 1' }]"
         :label="$t('quotation.form.customerBranchSelect')"
@@ -35,6 +36,7 @@ const toggleWorker = ref(true);
         dense
       />
       <q-select
+        lazy-rules="ondemand"
         v-model="selectedCustomer"
         :options="[{ label: 'Customer 1', value: 'Customer 1' }]"
         :label="$t('quotation.form.customerSelect')"