Added recurring field validation.. ( #33kfqf6 )

resources/assets/js/components/AkauntingRecurring.vue

@@ -20,6 +20,8 @@
 
             <input type="text" class="w-20 text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" v-model="interval" @input="change" v-if="frequency == 'custom'">
 
+            <div class="text-red text-sm mt-1 block" v-if="invertalError" v-html="invertalError"></div>
+
             <el-select class="w-36 ml-2" v-model="customFrequency" @input="change" v-if="frequency == 'custom'">
                 <el-option
                 v-for="(label, value) in customFrequencies"
@@ -28,6 +30,8 @@
                 :value="value">
                 </el-option>
             </el-select>
+
+            <div class="text-red text-sm mt-1 block" v-if="customFrequencyError" v-html="customFrequencyError"></div>
         </div>
 
         <div class="flex flex-wrap lg:flex-nowrap items-center space-y-3 lg:space-y-0" :class="{ 'justify-start': limit !== 'never' }">
@@ -76,6 +80,8 @@
                 }">
             </el-date-picker>
 
+            <div class="text-red text-sm mt-1 block" v-if="startedError" v-html="startedError"></div>
+
             <div class="w-24 px-2 text-sm text-center">
                 {{ middleText }}
             </div>
@@ -91,6 +97,8 @@
 
             <input type="text" class="w-20 text-sm px-3 py-2.5 mt-1 ml-2 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" v-model="limitCount" v-if="limit == 'after'" @input="change">
 
+            <div class="text-red text-sm mt-1 block" v-if="limitCountError" v-html="limitCountError"></div>
+
             <div class="pl-2 text-sm" v-if="limit == 'after'">
                 {{ endText }}
             </div>
@@ -106,6 +114,8 @@
                 @input="change"
             >
             </el-date-picker>
+
+            <div class="text-red text-sm mt-1 block" v-if="limitDateError" v-html="limitDateError"></div>
         </div>
     </div>
 </template>
@@ -163,6 +173,11 @@ export default {
             default: 'monthly',
             description: "Default reccuring type"
         },
+        invertalError: {
+            type: String,
+            default: null,
+            description: "Selectbox input error message"
+        },
 
         customFrequencies: null,
         customFrequencyValue: {
@@ -170,12 +185,22 @@ export default {
             default: 'monthly',
             description: "Default reccuring type"
         },
+        customFrequencyError: {
+            type: String,
+            default: null,
+            description: "Selectbox input error message"
+        },
 
         startedValue: {
             type: String,
             default: 'never',
             description: "Default reccuring limit"
         },
+        startedError: {
+            type: String,
+            default: null,
+            description: "Selectbox input error message"
+        },
 
         limits: null,
 
@@ -190,12 +215,22 @@ export default {
             default: 0,
             description: "Default reccuring limit"
         },
+        limitCountError: {
+            type: String,
+            default: null,
+            description: "Selectbox input error message"
+        },
 
         limitDateValue: {
             type: String,
             default: '',
             description: "Default reccuring limit"
         },
+        limitDateError: {
+            type: String,
+            default: null,
+            description: "Selectbox input error message"
+        },
 
         dateFormat: {
             type: String,

resources/views/components/form/group/recurring.blade.php

@@ -23,12 +23,14 @@
     @else
     @interval="form.recurring_interval = $event"
     @endif
+    :invertal-error="form.errors.get('recurring_interval')"
 
     @if ($attributes->has('@custom_frequency'))
     @custom_frequency="form.recurring_custom_frequency = $event;{{ $attributes['@custom_frequency'] }}"
     @else
     @custom_frequency="form.recurring_custom_frequency = $event"
     @endif
+    :custom-frequency-error="form.errors.get('recurring_custom_frequency')"
 
     started-value="{{ $startedValue }}"
     @if ($attributes->has('@started'))
@@ -36,6 +38,7 @@
     @else
     @started="form.recurring_started_at = $event"
     @endif
+    :started-error="form.errors.get('recurring_started_at')"
 
     :limits="{{ json_encode($limits) }}"
     limit-value="{{ $limit }}"
@@ -52,6 +55,7 @@
     @else
     @limit_count="form.recurring_limit_count = $event"
     @endif
+    :limit-count-error="form.errors.get('recurring_limit_count')"
 
     limit-date-value="{{ $limitDateValue }}"
     @if ($attributes->has('@limit_date'))
@@ -59,9 +63,10 @@
     @else
     @limit_date="form.recurring_limit_date = $event"
     @endif
+    :limit-date-error="form.errors.get('recurring_limit_date')"
 
     date-format="{{ company_date_format() }}"
 
     {{ $attributes }}
 >
-</akaunting-recurring>
+</akaunting-recurring>