commit 5a8a1e27e100f3b807b4dcd0691959d3f8700c93
author Erik Böck <89930804+erikbocks@users.noreply.github.com> Fri Oct 03 07:42:36 2025 -0300
committer GitHub <noreply@github.com> Fri Oct 03 16:12:36 2025 +0530
tree d3f6482c1f7e2ff433b9df613e912e7e5a02c342
parent b09f3e8ff7e57868da9654998708ee7fc08a8502

Fixed and enhanced vlan field validation in the UI (#10983)

ui/src/views/infra/zone/AdvancedGuestTrafficForm.vue

diff --git a/ui/src/views/infra/zone/AdvancedGuestTrafficForm.vue b/ui/src/views/infra/zone/AdvancedGuestTrafficForm.vue
index 4c0d2c1..caf690e 100644
--- a/ui/src/views/infra/zone/AdvancedGuestTrafficForm.vue
+++ b/ui/src/views/infra/zone/AdvancedGuestTrafficForm.vue
@@ -39,6 +39,7 @@
         <a-form-item
           name="vlanRangeStart"
           ref="vlanRangeStart"
+          :validate-status="validStatus"
           has-feedback
           :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
           <a-input-number
@@ -53,7 +54,6 @@
         <a-form-item
           name="vlanRangeEnd"
           ref="vlanRangeEnd"
-          has-feedback
           :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
           <a-input-number
             v-model:value="form.vlanRangeEnd"
@@ -102,9 +102,24 @@
         labelCol: { span: 8 },
         wrapperCol: { span: 12 }
       },
-      validStatus: '',
-      validMessage: '',
-      formModel: {}
+      validStatus: 'error',
+      validMessage: this.$t('message.error.vlan.range'),
+      formModel: {},
+      rangeLimits: {
+        VLAN: {
+          min: 1,
+          max: 4094
+        },
+        VXLAN: {
+          min: 4096,
+          max: 16777214
+        },
+        GRE: {
+          min: 0,
+          max: 4294967295
+        }
+      },
+      isolationMethod: ''
     }
   },
   watch: {
@@ -120,6 +135,7 @@
     this.initForm()
   },
   mounted () {
+    this.getIsolationMethod()
     this.fillValue()
   },
   methods: {
@@ -143,9 +159,15 @@
       })
     },
     fillValue () {
-      this.form.vlanRangeStart = this.getPrefilled('vlanRangeStart')
-      this.form.vlanRangeEnd = this.getPrefilled('vlanRangeEnd')
+      const vlanStart = this.getPrefilled('vlanRangeStart')
+      const vlanEnd = this.getPrefilled('vlanRangeEnd')
+      this.form.vlanRangeStart = vlanStart
+      this.form.vlanRangeEnd = vlanEnd
       this.formModel = toRaw(this.form)
+      if (this.checkFromTo(vlanStart, vlanEnd)) {
+        this.validStatus = 'success'
+        this.validMessage = ''
+      }
     },
     getPrefilled (key) {
       return this.prefillContent?.[key] || null
@@ -156,7 +178,7 @@
 
       this.formRef.value.validate().then(() => {
         const values = toRaw(this.form)
-        if (!values.vlanRangeStart || (values.vlanRangeEnd && !this.checkFromTo(values.vlanRangeStart, values.vlanRangeEnd))) {
+        if (!this.checkFromTo(values.vlanRangeStart, values.vlanRangeEnd)) {
           this.validStatus = 'error'
           this.validMessage = this.$t('message.error.vlan.range')
           return
@@ -185,19 +207,30 @@
         toVal = value
         fromVal = this.form[rule.compare]
       }
-      if (fromVal && toVal && !this.checkFromTo(fromVal, toVal)) {
+      if (!this.checkFromTo(fromVal, toVal)) {
         this.validStatus = 'error'
         this.validMessage = this.$t('message.error.vlan.range')
       }
       return Promise.resolve()
     },
     checkFromTo (fromVal, toVal) {
-      if (!fromVal) fromVal = 0
-      if (!toVal) toVal = 0
-      if (fromVal > toVal) {
-        return false
+      const vlanRange = this.rangeLimits[this.isolationMethod] ? this.rangeLimits[this.isolationMethod] : this.rangeLimits.VLAN
+      switch (true) {
+        case ((fromVal === null) || (toVal === null)):
+        case fromVal === toVal:
+        case fromVal > toVal:
+        case toVal > vlanRange.max:
+        case fromVal < vlanRange.min:
+          return false
+        default:
+          this.validStatus = 'success'
+          this.validMessage = ''
+          return true
       }
-      return true
+    },
+    getIsolationMethod () {
+      const phyNetworks = this.getPrefilled('physicalNetworks')
+      this.isolationMethod = phyNetworks[phyNetworks.length - 1].isolationMethod
     }
   }
 }