diff --git a/ui/src/views/network/CreateVpc.vue b/ui/src/views/network/CreateVpc.vue
index 0b251364a92..98e8bb408c1 100644
--- a/ui/src/views/network/CreateVpc.vue
+++ b/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="selectedVpcOfferingHavingRoutedNetworkMode"
           ref="cidrsize"
           name="cidrsize">
           <template #label>
@@ -276,6 +276,9 @@ export default {
         return sourcenatService && sourcenatService.length === 1
       }
       return false
+    },
+    selectedVpcOfferingHavingRoutedNetworkMode () {
+      return this.selectedVpcOffering && this.selectedVpcOffering.networkmode === 'ROUTED'
     }
   },
   methods: {
@@ -397,6 +400,7 @@ export default {
     handleVpcOfferingChange (value) {
       this.selectedVpcOffering = {}
       if (!value) {
+        this.updateCidrRule()
         return
       }
       for (var offering of this.vpcOfferings) {
@@ -406,9 +410,17 @@ export default {
           if (this.isASNumberRequired()) {
             this.fetchZoneASNumbers()
           }
-          return
+          break
         }
       }
+      this.updateCidrRule()
+    },
+    updateCidrRule () {
+      if (!this.selectedVpcOfferingHavingRoutedNetworkMode) {
+        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