UI: Autoscroll to Error Field (#5200)

Fixes #4798
2025-11-02 20:02:29 +01:00 · 2021-11-18 14:01:22 +05:30 · 2021-11-18 14:01:22 +05:30 · babf94f801
commit babf94f801
parent dd458feeb8
87 changed files with 144 additions and 99 deletions
--- a/ui/src/components/view/ResourceLimitTab.vue
+++ b/ui/src/components/view/ResourceLimitTab.vue
@ -119,7 +119,7 @@ export default {

      if (this.formLoading) return

-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/components/view/SearchView.vue
+++ b/ui/src/components/view/SearchView.vue
@ -512,7 +512,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      this.paramsFilter = {}
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@ -1201,7 +1201,7 @@ export default {
          this.modalInfo.title = this.currentAction.label
          this.modalInfo.docHelp = this.currentAction.docHelp
        }
-        this.form.validateFields((err, values) => {
+        this.form.validateFieldsAndScroll((err, values) => {
          if (!err) {
            this.actionLoading = true
            const itemsNameMap = {}
@ -1295,7 +1295,7 @@ export default {
    },
    execSubmit (e) {
      e.preventDefault()
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
@ -1528,7 +1528,7 @@ export default {
        if (!confirmPasswordVal || confirmPasswordVal.length === 0) {
          callback()
        } else if (value && this.confirmDirty) {
-          form.validateFields(['confirmpassword'], { force: true })
+          form.validateFieldsAndScroll(['confirmpassword'], { force: true })
          callback()
        } else {
          callback()
--- a/ui/src/views/auth/Login.vue
+++ b/ui/src/views/auth/Login.vue
@ -229,7 +229,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      const {
-        form: { validateFields },
+        form: { validateFieldsAndScroll },
        state,
        customActiveKey,
        Login
@ -238,9 +238,9 @@ export default {

      state.loginBtn = true

-      const validateFieldsKey = customActiveKey === 'cs' ? ['username', 'password', 'domain'] : ['idp']
+      const validateFieldsAndScrollKey = customActiveKey === 'cs' ? ['username', 'password', 'domain'] : ['idp']

-      validateFields(validateFieldsKey, { force: true }, (err, values) => {
+      validateFieldsAndScroll(validateFieldsAndScrollKey, { force: true }, (err, values) => {
        if (!err) {
          if (this.$config.multipleServer) {
            this.axios.defaults.baseURL = (this.server.apiHost || '') + this.server.apiBase
--- a/ui/src/views/compute/AttachIso.vue
+++ b/ui/src/views/compute/AttachIso.vue
@ -117,7 +117,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/compute/CreateKubernetesCluster.vue
+++ b/ui/src/views/compute/CreateKubernetesCluster.vue
@ -432,7 +432,12 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      const options = {
+        scroll: {
+          offsetTop: 10
+        }
+      }
+      this.form.validateFieldsAndScroll(options, (err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/compute/CreateSSHKeyPair.vue
+++ b/ui/src/views/compute/CreateSSHKeyPair.vue
@ -146,7 +146,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/compute/CreateSnapshotWizard.vue
+++ b/ui/src/views/compute/CreateSnapshotWizard.vue
@ -112,7 +112,7 @@ export default {
      e.preventDefault()

      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) return

        const params = {}
--- a/ui/src/views/compute/DeployVM.vue
+++ b/ui/src/views/compute/DeployVM.vue
@ -1475,9 +1475,14 @@ export default {
    },
    handleSubmit (e) {
      console.log('wizard submit')
+      const options = {
+        scroll: {
+          offsetTop: 90
+        }
+      }
      e.preventDefault()
      if (this.loading.deploy) return
-      this.form.validateFields(async (err, values) => {
+      this.form.validateFieldsAndScroll(options, async (err, values) => {
        if (err) {
          if (err.licensesaccepted) {
            this.$notification.error({
--- a/ui/src/views/compute/DestroyVM.vue
+++ b/ui/src/views/compute/DestroyVM.vue
@ -104,7 +104,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/compute/EditVM.vue
+++ b/ui/src/views/compute/EditVM.vue
@ -200,7 +200,7 @@ export default {
    },
    handleSubmit (e) {
      e.preventDefault()
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) return

        const params = {}
--- a/ui/src/views/compute/MigrateVMStorage.vue
+++ b/ui/src/views/compute/MigrateVMStorage.vue
@ -122,7 +122,7 @@ export default {
    },
    handleSubmit (e) {
      e.preventDefault()
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/compute/ScaleKubernetesCluster.vue
+++ b/ui/src/views/compute/ScaleKubernetesCluster.vue
@ -214,7 +214,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/compute/StartVirtualMachine.vue
+++ b/ui/src/views/compute/StartVirtualMachine.vue
@ -206,7 +206,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/compute/UpgradeKubernetesCluster.vue
+++ b/ui/src/views/compute/UpgradeKubernetesCluster.vue
@ -140,7 +140,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/compute/backup/FormSchedule.vue
+++ b/ui/src/views/compute/backup/FormSchedule.vue
@ -260,7 +260,7 @@ export default {
    },
    handleSubmit (e) {
      if (this.actionLoading) return
-      this.form.validateFields((error, values) => {
+      this.form.validateFieldsAndScroll((error, values) => {
        if (error) {
          return
        }
--- a/ui/src/views/iam/AddAccount.vue
+++ b/ui/src/views/iam/AddAccount.vue
@ -310,7 +310,12 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      const options = {
+        scroll: {
+          offsetTop: 10
+        }
+      }
+      this.form.validateFieldsAndScroll(options, (err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/iam/AddLdapAccount.vue
+++ b/ui/src/views/iam/AddLdapAccount.vue
@ -364,7 +364,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/iam/AddUser.vue
+++ b/ui/src/views/iam/AddUser.vue
@ -287,7 +287,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/iam/ChangeUserPassword.vue
+++ b/ui/src/views/iam/ChangeUserPassword.vue
@ -115,7 +115,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/iam/ConfigureSamlSsoAuth.vue
+++ b/ui/src/views/iam/ConfigureSamlSsoAuth.vue
@ -98,7 +98,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/iam/CreateRole.vue
+++ b/ui/src/views/iam/CreateRole.vue
@ -144,7 +144,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/iam/DomainActionForm.vue
+++ b/ui/src/views/iam/DomainActionForm.vue
@ -185,7 +185,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.action.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/iam/EditUser.vue
+++ b/ui/src/views/iam/EditUser.vue
@ -160,7 +160,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/iam/ImportRole.vue
+++ b/ui/src/views/iam/ImportRole.vue
@ -145,7 +145,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/image/AddKubernetesSupportedVersion.vue
+++ b/ui/src/views/image/AddKubernetesSupportedVersion.vue
@ -192,7 +192,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/image/IsoZones.vue
+++ b/ui/src/views/image/IsoZones.vue
@ -430,7 +430,7 @@ export default {
    handleCopyIsoSubmit (e) {
      e.preventDefault()
      if (this.copyLoading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/image/RegisterOrUploadIso.vue
+++ b/ui/src/views/image/RegisterOrUploadIso.vue
@ -307,7 +307,12 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      const options = {
+        scroll: {
+          offsetTop: 10
+        }
+      }
+      this.form.validateFieldsAndScroll(options, (err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/image/RegisterOrUploadTemplate.vue
+++ b/ui/src/views/image/RegisterOrUploadTemplate.vue
@ -829,7 +829,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err || this.zoneError !== '') {
          return
        }
--- a/ui/src/views/image/TemplateZones.vue
+++ b/ui/src/views/image/TemplateZones.vue
@ -529,7 +529,7 @@ export default {
    handleCopyTemplateSubmit (e) {
      e.preventDefault()
      if (this.copyLoading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/image/UpdateKubernetesSupportedVersion.vue
+++ b/ui/src/views/image/UpdateKubernetesSupportedVersion.vue
@ -113,7 +113,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/infra/AddPrimaryStorage.vue
+++ b/ui/src/views/infra/AddPrimaryStorage.vue
@ -590,7 +590,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/infra/AddSecondaryStorage.vue
+++ b/ui/src/views/infra/AddSecondaryStorage.vue
@ -245,7 +245,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/infra/InfraSummary.vue
+++ b/ui/src/views/infra/InfraSummary.vue
@ -265,7 +265,7 @@ export default {
      if (this.sslFormSubmitting) return
      this.sslFormSubmitting = true

-      this.form.validateFields(errors => {
+      this.form.validateFieldsAndScroll(errors => {
        if (errors) {
          this.sslFormSubmitting = false
          return
--- a/ui/src/views/infra/MigrateData.vue
+++ b/ui/src/views/infra/MigrateData.vue
@ -127,7 +127,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/infra/PodAdd.vue
+++ b/ui/src/views/infra/PodAdd.vue
@ -187,7 +187,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) return

        this.loading = true
--- a/ui/src/views/infra/network/DedicatedVLANTab.vue
+++ b/ui/src/views/infra/network/DedicatedVLANTab.vue
@ -371,7 +371,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.formLoading) return
-      this.form.validateFields(errors => {
+      this.form.validateFieldsAndScroll(errors => {
        if (errors) return

        this.formLoading = true
--- a/ui/src/views/infra/network/EditTrafficLabel.vue
+++ b/ui/src/views/infra/network/EditTrafficLabel.vue
@ -150,7 +150,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/infra/network/IpRangesTabManagement.vue
+++ b/ui/src/views/infra/network/IpRangesTabManagement.vue
@ -298,7 +298,7 @@ export default {
    },
    handleAddIpRange (e) {
      if (this.componentLoading) return
-      this.form.validateFields((error, values) => {
+      this.form.validateFieldsAndScroll((error, values) => {
        if (error) return

        this.componentLoading = true
--- a/ui/src/views/infra/network/IpRangesTabPublic.vue
+++ b/ui/src/views/infra/network/IpRangesTabPublic.vue
@ -516,7 +516,7 @@ export default {
    },
    handleAddIpRange (e) {
      if (this.componentLoading) return
-      this.form.validateFields((error, values) => {
+      this.form.validateFieldsAndScroll((error, values) => {
        if (error) return

        this.componentLoading = true
--- a/ui/src/views/infra/network/IpRangesTabStorage.vue
+++ b/ui/src/views/infra/network/IpRangesTabStorage.vue
@ -279,7 +279,7 @@ export default {
    },
    handleAddIpRange (e) {
      if (this.componentLoading) return
-      this.form.validateFields((error, values) => {
+      this.form.validateFieldsAndScroll((error, values) => {
        if (error) return

        this.componentLoading = true
--- a/ui/src/views/infra/network/ServiceProvidersTab.vue
+++ b/ui/src/views/infra/network/ServiceProvidersTab.vue
@ -1170,7 +1170,7 @@ export default {
        await this.executeConfirmAction()
        return
      }
-      await this.form.validateFields(async (err, values) => {
+      await this.form.validateFieldsAndScroll(async (err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue
+++ b/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue
@ -166,7 +166,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields(async (err, values) => {
+      this.form.validateFieldsAndScroll(async (err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue
+++ b/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue
@ -198,7 +198,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields(async (err, values) => {
+      this.form.validateFieldsAndScroll(async (err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/infra/network/providers/AddNiciraNvpDevice.vue
+++ b/ui/src/views/infra/network/providers/AddNiciraNvpDevice.vue
@ -130,7 +130,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields(async (err, values) => {
+      this.form.validateFieldsAndScroll(async (err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue
+++ b/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue
@ -213,7 +213,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields(async (err, values) => {
+      this.form.validateFieldsAndScroll(async (err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/infra/network/providers/AddSrxFirewall.vue
+++ b/ui/src/views/infra/network/providers/AddSrxFirewall.vue
@ -191,7 +191,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields(async (err, values) => {
+      this.form.validateFieldsAndScroll(async (err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/infra/routers/RouterHealthCheck.vue
+++ b/ui/src/views/infra/routers/RouterHealthCheck.vue
@ -151,7 +151,7 @@ export default {
    handleGetHealthChecksSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/infra/zone/AdvancedGuestTrafficForm.vue
+++ b/ui/src/views/infra/zone/AdvancedGuestTrafficForm.vue
@ -135,7 +135,7 @@ export default {
    },
    handleSubmit (e) {
      e.preventDefault()
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        this.validStatus = ''
        this.validMessage = ''
        if (err) {
--- a/ui/src/views/infra/zone/IpAddressRangeForm.vue
+++ b/ui/src/views/infra/zone/IpAddressRangeForm.vue
@ -229,7 +229,7 @@ export default {
  methods: {
    handleAddRange (e) {
      e.preventDefault()
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          this.ipRanges.push({
            key: this.ipRanges.length.toString(),
--- a/ui/src/views/infra/zone/StaticInputsForm.vue
+++ b/ui/src/views/infra/zone/StaticInputsForm.vue
@ -187,7 +187,7 @@ export default {
    },
    handleSubmit (e) {
      e.preventDefault()
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
+++ b/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
@ -489,7 +489,7 @@ export default {
      this.emitPhysicalNetworks()
    },
    updateTrafficLabel (trafficInEdit) {
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          this.showEditTraffic = false
          if (this.hypervisor === 'VMware') {
--- a/ui/src/views/infra/zone/ZoneWizardZoneDetailsStep.vue
+++ b/ui/src/views/infra/zone/ZoneWizardZoneDetailsStep.vue
@ -548,7 +548,7 @@ export default {
    },
    handleSubmit (e) {
      e.preventDefault()
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/infra/zone/ZoneWizardZoneTypeStep.vue
+++ b/ui/src/views/infra/zone/ZoneWizardZoneTypeStep.vue
@ -127,7 +127,7 @@ export default {
  methods: {
    handleSubmit (e) {
      e.preventDefault()
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          this.$emit('nextPressed')
        }
--- a/ui/src/views/network/AclListRulesTab.vue
+++ b/ui/src/views/network/AclListRulesTab.vue
@ -385,7 +385,7 @@ export default {
      this.tagsLoading = true

      e.preventDefault()
-      this.newTagsForm.validateFields((err, values) => {
+      this.newTagsForm.validateFieldsAndScroll((err, values) => {
        if (err) {
          this.tagsLoading = false
          return
@ -471,7 +471,7 @@ export default {
    },
    handleEditRule (e) {
      e.preventDefault()
-      this.ruleForm.validateFields((err, values) => {
+      this.ruleForm.validateFieldsAndScroll((err, values) => {
        if (err) return

        this.fetchLoading = true
@ -561,7 +561,7 @@ export default {
    },
    handleAddRule (e) {
      e.preventDefault()
-      this.ruleForm.validateFields((err, values) => {
+      this.ruleForm.validateFieldsAndScroll((err, values) => {
        if (err) return

        this.fetchLoading = true
--- a/ui/src/views/network/CreateIsolatedNetworkForm.vue
+++ b/ui/src/views/network/CreateIsolatedNetworkForm.vue
@ -403,7 +403,12 @@ export default {
    },
    handleSubmit (e) {
      if (this.actionLoading) return
-      this.form.validateFields((error, values) => {
+      const options = {
+        scroll: {
+          offsetTop: 10
+        }
+      }
+      this.form.validateFieldsAndScroll(options, (error, values) => {
        if (error) {
          return
        }
--- a/ui/src/views/network/CreateL2NetworkForm.vue
+++ b/ui/src/views/network/CreateL2NetworkForm.vue
@ -365,7 +365,7 @@ export default {
    },
    handleSubmit (e) {
      if (this.actionLoading) return
-      this.form.validateFields((error, values) => {
+      this.form.validateFieldsAndScroll((error, values) => {
        if (error) {
          return
        }
--- a/ui/src/views/network/CreateSharedNetworkForm.vue
+++ b/ui/src/views/network/CreateSharedNetworkForm.vue
@ -694,7 +694,12 @@ export default {
    },
    handleSubmit (e) {
      if (this.actionLoading) return
-      this.form.validateFields((error, values) => {
+      const options = {
+        scroll: {
+          offsetTop: 10
+        }
+      }
+      this.form.validateFieldsAndScroll(options, (error, values) => {
        if (error) {
          return
        }
--- a/ui/src/views/network/CreateVlanIpRange.vue
+++ b/ui/src/views/network/CreateVlanIpRange.vue
@ -224,7 +224,7 @@ export default {
      e.preventDefault()

      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/network/CreateVpc.vue
+++ b/ui/src/views/network/CreateVpc.vue
@ -173,7 +173,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/network/CreateVpnCustomerGateway.vue
+++ b/ui/src/views/network/CreateVpnCustomerGateway.vue
@ -325,7 +325,12 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.isSubmitted) return
-      this.form.validateFields((err, values) => {
+      const options = {
+        scroll: {
+          offsetTop: 10
+        }
+      }
+      this.form.validateFieldsAndScroll(options, (err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/network/FirewallRules.vue
+++ b/ui/src/views/network/FirewallRules.vue
@ -448,7 +448,7 @@ export default {
      if (this.addTagLoading) return
      this.addTagLoading = true

-      this.newTagsForm.validateFields((err, values) => {
+      this.newTagsForm.validateFieldsAndScroll((err, values) => {
        if (err) {
          this.tagsLoading = false
          return
--- a/ui/src/views/network/IngressEgressRuleConfigure.vue
+++ b/ui/src/views/network/IngressEgressRuleConfigure.vue
@ -415,7 +415,7 @@ export default {
      this.tagsLoading = true

      e.preventDefault()
-      this.newTagsForm.validateFields((err, values) => {
+      this.newTagsForm.validateFieldsAndScroll((err, values) => {
        if (err) {
          this.tagsLoading = false
          return
--- a/ui/src/views/network/LoadBalancing.vue
+++ b/ui/src/views/network/LoadBalancing.vue
@ -765,7 +765,7 @@ export default {
      this.tagsModalLoading = true

      e.preventDefault()
-      this.newTagsForm.validateFields((err, values) => {
+      this.newTagsForm.validateFieldsAndScroll((err, values) => {
        if (err) {
          this.tagsModalLoading = false
          return
@ -926,7 +926,7 @@ export default {
      if (this.stickinessModalLoading) return
      this.stickinessModalLoading = true
      e.preventDefault()
-      this.stickinessPolicyForm.validateFields((err, values) => {
+      this.stickinessPolicyForm.validateFieldsAndScroll((err, values) => {
        if (err) {
          this.stickinessModalLoading = false
          return
--- a/ui/src/views/network/PortForwarding.vue
+++ b/ui/src/views/network/PortForwarding.vue
@ -664,7 +664,7 @@ export default {
      this.tagsModalLoading = true

      e.preventDefault()
-      this.newTagsForm.validateFields((err, values) => {
+      this.newTagsForm.validateFieldsAndScroll((err, values) => {
        if (err) {
          this.tagsModalLoading = false
          return
--- a/ui/src/views/network/StaticRoutesTab.vue
+++ b/ui/src/views/network/StaticRoutesTab.vue
@ -251,7 +251,7 @@ export default {
      this.tagsLoading = true

      e.preventDefault()
-      this.newTagsForm.validateFields((err, values) => {
+      this.newTagsForm.validateFieldsAndScroll((err, values) => {
        if (err) {
          this.tagsLoading = false
          return
--- a/ui/src/views/network/VpcTab.vue
+++ b/ui/src/views/network/VpcTab.vue
@ -637,7 +637,7 @@ export default {
      if (this.modals.gatewayLoading) return
      this.modals.gatewayLoading = true

-      this.gatewayForm.validateFields(errors => {
+      this.gatewayForm.validateFieldsAndScroll(errors => {
        if (errors) {
          this.modals.gatewayLoading = false
          return
@ -693,7 +693,7 @@ export default {
      this.fetchLoading = true
      this.modals.vpnConnection = false

-      this.vpnConnectionForm.validateFields((errors, values) => {
+      this.vpnConnectionForm.validateFieldsAndScroll((errors, values) => {
        if (errors) {
          this.fetchLoading = false
          return
@ -737,7 +737,7 @@ export default {
      this.fetchLoading = true
      this.modals.networkAcl = false

-      this.networkAclForm.validateFields((errors, values) => {
+      this.networkAclForm.validateFieldsAndScroll((errors, values) => {
        if (errors) {
          this.fetchLoading = false
        }
--- a/ui/src/views/network/VpcTiersTab.vue
+++ b/ui/src/views/network/VpcTiersTab.vue
@ -637,7 +637,7 @@ export default {
      this.fetchLoading = true
      this.modalLoading = true

-      this.form.validateFields((errors, values) => {
+      this.form.validateFieldsAndScroll((errors, values) => {
        if (errors) {
          this.fetchLoading = false
          this.modalLoading = false
@ -681,7 +681,7 @@ export default {
      if (this.modalLoading) return
      this.fetchLoading = true
      this.modalLoading = true
-      this.form.validateFields((errors, values) => {
+      this.form.validateFieldsAndScroll((errors, values) => {
        if (errors) {
          this.fetchLoading = false
          this.modalLoading = false
--- a/ui/src/views/offering/AddComputeOffering.vue
+++ b/ui/src/views/offering/AddComputeOffering.vue
@ -735,7 +735,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/offering/AddDiskOffering.vue
+++ b/ui/src/views/offering/AddDiskOffering.vue
@ -483,7 +483,12 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      const options = {
+        scroll: {
+          offsetTop: 10
+        }
+      }
+      this.form.validateFieldsAndScroll(options, (err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/offering/AddNetworkOffering.vue
+++ b/ui/src/views/offering/AddNetworkOffering.vue
@ -707,7 +707,12 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      const options = {
+        scroll: {
+          offsetTop: 10
+        }
+      }
+      this.form.validateFieldsAndScroll(options, (err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/offering/AddVpcOffering.vue
+++ b/ui/src/views/offering/AddVpcOffering.vue
@ -312,7 +312,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/offering/ImportBackupOffering.vue
+++ b/ui/src/views/offering/ImportBackupOffering.vue
@ -155,7 +155,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/offering/UpdateOfferingAccess.vue
+++ b/ui/src/views/offering/UpdateOfferingAccess.vue
@ -259,7 +259,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/plugins/quota/EditTariffValueWizard.vue
+++ b/ui/src/views/plugins/quota/EditTariffValueWizard.vue
@ -102,7 +102,7 @@ export default {
    submitTariff (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((error, values) => {
+      this.form.validateFieldsAndScroll((error, values) => {
        if (error) return

        const params = {}
--- a/ui/src/views/project/AddAccountOrUserToProject.vue
+++ b/ui/src/views/project/AddAccountOrUserToProject.vue
@ -230,7 +230,7 @@ export default {
    addAccountToProject (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
@ -264,7 +264,7 @@ export default {
    addUserToProject (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/project/InvitationTokenTemplate.vue
+++ b/ui/src/views/project/InvitationTokenTemplate.vue
@ -67,7 +67,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/project/iam/ProjectRoleTab.vue
+++ b/ui/src/views/project/iam/ProjectRoleTab.vue
@ -213,7 +213,7 @@ export default {
    updateProjectRole (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
@ -253,7 +253,7 @@ export default {
    createProjectRole (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/storage/AttachVolume.vue
+++ b/ui/src/views/storage/AttachVolume.vue
@ -105,7 +105,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/storage/CreateSnapshotFromVMSnapshot.vue
+++ b/ui/src/views/storage/CreateSnapshotFromVMSnapshot.vue
@ -98,7 +98,7 @@ export default {
    },
    handleSubmit (e) {
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/storage/CreateVolume.vue
+++ b/ui/src/views/storage/CreateVolume.vue
@ -194,7 +194,7 @@ export default {
    },
    handleSubmit (e) {
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/storage/FormSchedule.vue
+++ b/ui/src/views/storage/FormSchedule.vue
@ -351,7 +351,7 @@ export default {
    },
    handleSubmit (e) {
      if (this.actionLoading) return
-      this.form.validateFields((error, values) => {
+      this.form.validateFieldsAndScroll((error, values) => {
        if (error) {
          return
        }
--- a/ui/src/views/storage/ResizeVolume.vue
+++ b/ui/src/views/storage/ResizeVolume.vue
@ -99,7 +99,7 @@ export default {
    },
    handleSubmit (e) {
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/storage/RestoreAttachBackupVolume.vue
+++ b/ui/src/views/storage/RestoreAttachBackupVolume.vue
@ -137,7 +137,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.actionLoading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/storage/TakeSnapshot.vue
+++ b/ui/src/views/storage/TakeSnapshot.vue
@ -139,7 +139,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.actionLoading) return
-      this.form.validateFields((error, values) => {
+      this.form.validateFieldsAndScroll((error, values) => {
        if (error) {
          return
        }
--- a/ui/src/views/storage/UploadLocalVolume.vue
+++ b/ui/src/views/storage/UploadLocalVolume.vue
@ -171,7 +171,7 @@ export default {
    handleSubmit (e) {
      e.preventDefault()
      if (this.loading) return
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }
--- a/ui/src/views/tools/ImportUnmanagedInstance.vue
+++ b/ui/src/views/tools/ImportUnmanagedInstance.vue
@ -621,7 +621,7 @@ export default {
    },
    handleSubmit (e) {
      e.preventDefault()
-      this.form.validateFields((err, values) => {
+      this.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return
        }