ui: make vpc cidr required when not showing cidrsize

Fixes #11391

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

Author: shwstppr

ui/src/views/network/CreateVpc.vue

@@ -72,7 +72,7 @@
             :placeholder="apiParams.cidr.description"/>
         </a-form-item>
         <a-form-item
-          v-if="selectedVpcOffering && selectedVpcOffering.networkmode === 'ROUTED'"
+          v-if="selectedVpcOfferingRoutedNetworkMode"
           ref="cidrsize"
           name="cidrsize">
           <template #label>
@@ -267,7 +267,10 @@ export default {
         return sourcenatService && sourcenatService.length === 1
       }
       return false
-    }
+    },
+    selectedVpcOfferingRoutedNetworkMode () {
+      return this.selectedVpcOffering && this.selectedVpcOffering.networkmode === 'ROUTED'
+    },
   },
   methods: {
     isAdminOrDomainAdmin,
@@ -280,6 +283,7 @@ export default {
         name: [{ required: true, message: this.$t('message.error.required.input') }],
         zoneid: [{ required: true, message: this.$t('label.required') }],
         vpcofferingid: [{ required: true, message: this.$t('label.required') }]
+        cidr: [{ required: true, message: this.$t('message.error.required.input') }],
       })
     },
     isASNumberRequired () {
@@ -388,6 +392,7 @@ export default {
     handleVpcOfferingChange (value) {
       this.selectedVpcOffering = {}
       if (!value) {
+        this.updateCidrRule()
         return
       }
       for (var offering of this.vpcOfferings) {
@@ -397,9 +402,17 @@ export default {
           if (this.isASNumberRequired()) {
             this.fetchZoneASNumbers()
           }
-          return
+          break
         }
       }
+      this.updateCidrRule()
+    },
+    updateCidrRule () {
+      if (!this.selectedVpcOfferingRoutedNetworkMode) {
+        this.rules.cidr = [{ required: true, message: this.$t('message.error.required.input') }]
+      } else {
+        delete this.rules.cidr
+      }
     },
     handleASNumberChange (selectedIndex) {
       this.selectedAsNumber = this.asNumbersZone[selectedIndex].asnumber