diff --git a/dashboard/src/views/VolumesView.vue b/dashboard/src/views/VolumesView.vue
index ccca6c992..c0c629825 100644
--- a/dashboard/src/views/VolumesView.vue
+++ b/dashboard/src/views/VolumesView.vue
@@ -73,47 +73,50 @@ const volumeDialogData = ref({
   // dynamic extra props from openVolumeDialog
 });
 
-const volumeDialogValid = computed(() => {
-  const data = volumeDialogData.value;
+const form = useTemplateRef('form');
+const volumeDialogIsValid = ref(false);
+function volumeDialogValid() {
+  function checkValidity() {
+    if (form.value && !form.value.checkValidity()) return false;
 
-  if (data.mode === 'new') {
-    if (!data.name) return false;
-    if (!data.mountType) return false;
+    const data = volumeDialogData.value;
+
+    switch (data.mountType) {
+      case 'filesystem':
+      case 'mountpoint':
+        if (!data.hostPath) return false;
+        if (!data.hostPath) return false;
+        break;
+      case 'ext4':
+      case 'xfs':
+        if (!data.diskPath) return false;
+        break;
+      case 'nfs':
+        if (!data.host) return false;
+        if (!data.remoteDir) return false;
+        break;
+      case 'sshfs':
+        if (!data.host) return false;
+        if (!data.remoteDir) return false;
+        if (!data.port) return false;
+        if (!data.user) return false;
+        if (!data.privateKey) return false;
+        break;
+      case 'cifs':
+        if (!data.host) return false;
+        if (!data.remoteDir) return false;
+        if (!data.username) return false;
+        if (!data.password) return false;
+        break;
+      default:
+        return false;
+    }
+
+    return true;
   }
 
-  switch (data.mountType) {
-    case 'filesystem':
-    case 'mountpoint':
-      if (!data.hostPath) return false;
-      if (!data.hostPath) return false;
-      break;
-    case 'ext4':
-    case 'xfs':
-      if (!data.diskPath) return false;
-      break;
-    case 'nfs':
-      if (!data.host) return false;
-      if (!data.remoteDir) return false;
-      break;
-    case 'sshfs':
-      if (!data.host) return false;
-      if (!data.remoteDir) return false;
-      if (!data.port) return false;
-      if (!data.user) return false;
-      if (!data.privateKey) return false;
-      break;
-    case 'cifs':
-      if (!data.host) return false;
-      if (!data.remoteDir) return false;
-      if (!data.username) return false;
-      if (!data.password) return false;
-      break;
-    default:
-      return false;
-  }
-
-  return true;
-});
+  volumeDialogIsValid.value = checkValidity();
+}
 
 async function refresh() {
   busy.value = true;
@@ -141,11 +144,6 @@ async function refresh() {
 const volumeDialog = useTemplateRef('volumeDialog');
 const inputDialog = useTemplateRef('inputDialog');
 
-const form = useTemplateRef('form');
-const isFormValid = ref(false);
-function checkValidity() {
-  isFormValid.value = form.value.checkValidity();
-}
 
 async function openVolumeDialog(volume) {
   volumeDialogData.value.error = null;
@@ -179,8 +177,6 @@ async function openVolumeDialog(volume) {
   volumeDialogData.value.xfsBlockDevices = xfsBlockDevices;
 
   volumeDialog.value.open();
-
-  setTimeout(checkValidity, 100); // update state of the confirm button
 }
 
 async function onSubmit() {
@@ -275,25 +271,26 @@ onMounted(async () =>{
     <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <InputDialog ref="inputDialog" />
 
+    <!-- width is to fix the 70 characters per line for ssh key -->
     <Dialog ref="volumeDialog"
-      class="volume-dialog"
+      style="width: 78ch;"
       :title="volumeDialogData.mode === 'edit' ? $t('volumes.editVolumeDialog.title') : $t('volumes.addVolumeDialog.title')"
       :reject-label="$t('main.dialog.cancel')"
        reject-style="secondary"
       :confirm-label="volumeDialogData.mode === 'edit' ? $t('main.dialog.save') : $t('main.action.add')"
-      :confirm-active="!volumeDialogData.busy && isFormValid"
+      :confirm-active="!volumeDialogData.busy && volumeDialogIsValid"
       :confirm-busy="volumeDialogData.busy"
       @confirm="onSubmit()"
     >
-      <form ref="form" @submit.prevent="onSubmit()" autocomplete="off" @input="checkValidity()">
+      <form ref="form" @submit.prevent="onSubmit()" autocomplete="off" @input="volumeDialogValid()">
         <fieldset :disabled="volumeDialogData.busy">
-          <input style="display: none;" type="submit" :disabled="!volumeDialogValid" />
+          <input style="display: none;" type="submit" :disabled="!volumeDialogIsValid" />
 
           <div class="error-label" v-show="volumeDialogData.error">{{ volumeDialogData.error }}</div>
 
           <FormGroup>
             <label for="volumeName">{{ $t('volumes.name') }}</label>
-            <TextInput id="volumeName" v-model="volumeDialogData.name" :readonly="volumeDialogData.mode === 'edit' ? true : undefined"/>
+            <TextInput id="volumeName" v-model="volumeDialogData.name" :readonly="volumeDialogData.mode === 'edit' ? true : undefined" required/>
           </FormGroup>
 
           <FormGroup>
@@ -303,7 +300,7 @@ onMounted(async () =>{
 
           <FormGroup v-if="volumeDialogData.mountType === 'filesystem' || volumeDialogData.mountType === 'mountpoint'">
             <label for="volumeHostPath">{{ $t('volumes.localDirectory') }}</label>
-            <TextInput id="volumeHostPath" v-model="volumeDialogData.hostPath" :placeholder="volumeDialogData.mountType === 'filesystem' ? '/srv/shared' : '/mnt/data'" />
+            <TextInput id="volumeHostPath" v-model="volumeDialogData.hostPath" :placeholder="volumeDialogData.mountType === 'filesystem' ? '/srv/shared' : '/mnt/data'" required/>
           </FormGroup>
 
           <FormGroup v-if="volumeDialogData.mountType === 'ext4' || volumeDialogData.mountType === 'xfs'">
@@ -314,7 +311,7 @@ onMounted(async () =>{
 
           <FormGroup v-if="volumeDialogData.mountType === 'cifs' || volumeDialogData.mountType === 'nfs' || volumeDialogData.mountType === 'sshfs'">
             <label for="volumeHost">{{ $t('volumes.addVolumeDialog.server') }}</label>
-            <TextInput v-model="volumeDialogData.host" id="volumeHost"/>
+            <TextInput v-model="volumeDialogData.host" id="volumeHost" required/>
           </FormGroup>
 
           <Checkbox v-if="volumeDialogData.mountType === 'cifs'" v-model="volumeDialogData.seal" :label="$t('backups.configureBackupStorage.cifsSealSupport')" />
@@ -326,27 +323,27 @@ onMounted(async () =>{
 
           <FormGroup v-if="volumeDialogData.mountType === 'cifs' || volumeDialogData.mountType === 'nfs' || volumeDialogData.mountType === 'sshfs'">
             <label for="volumeRemoteDir">{{ $t('volumes.addVolumeDialog.remoteDirectory') }}</label>
-            <TextInput v-model="volumeDialogData.remoteDir" id="volumeRemoteDir" placeholder="/share" />
+            <TextInput v-model="volumeDialogData.remoteDir" id="volumeRemoteDir" placeholder="/share"/>
           </FormGroup>
 
           <FormGroup v-if="volumeDialogData.mountType === 'cifs'">
             <label for="volumeUsername">{{ $t('volumes.addVolumeDialog.username') }}</label>
-            <TextInput v-model="volumeDialogData.username" id="volumeUsername" />
+            <TextInput v-model="volumeDialogData.username" id="volumeUsername" required/>
           </FormGroup>
 
           <FormGroup v-if="volumeDialogData.mountType === 'cifs'">
             <label for="volumePassword">{{ $t('volumes.addVolumeDialog.password') }}</label>
-            <MaskedInput v-model="volumeDialogData.password" id="volumePassword" />
+            <MaskedInput v-model="volumeDialogData.password" id="volumePassword" required/>
           </FormGroup>
 
           <FormGroup v-if="volumeDialogData.mountType === 'sshfs'">
             <label for="volumeUser">{{ $t('volumes.addVolumeDialog.user') }}</label>
-            <TextInput v-model="volumeDialogData.user" id="volumeAddUser" />
+            <TextInput v-model="volumeDialogData.user" id="volumeAddUser" required/>
           </FormGroup>
 
           <FormGroup v-if="volumeDialogData.mountType === 'sshfs'">
             <label for="volumePrivateKey">{{ $t('volumes.addVolumeDialog.privateKey') }}</label>
-            <MaskedInput multiline rows="7" style="white-space: nowrap;" v-model="volumeDialogData.privateKey" id="volumePrivateKey" />
+            <MaskedInput multiline rows="7" style="white-space: nowrap;" v-model="volumeDialogData.privateKey" id="volumePrivateKey" required/>
           </FormGroup>
 
         </fieldset>
@@ -378,11 +375,3 @@ onMounted(async () =>{
     </Section>
   </div>
 </template>
-
-<style>
-
-div.volume-dialog {
-  width: 78ch;
-}
-
-</style>
\ No newline at end of file