volume: fix up form validation pattern

dashboard/src/views/VolumesView.vue

@@ -74,11 +74,11 @@ const volumeDialogData = ref({
 });
 
 const form = useTemplateRef('form');
-const volumeDialogIsValid = ref(false);
-function volumeDialogValid() {
-  function checkValidity() {
-    if (form.value && !form.value.checkValidity()) return false;
+const isFormValid = ref(false);
+function checkValidity() {
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
 
+  function checkData() {
     const data = volumeDialogData.value;
 
     switch (data.mountType) {
@@ -115,7 +115,9 @@ function volumeDialogValid() {
     return true;
   }
 
-  volumeDialogIsValid.value = checkValidity();
+  if (isFormValid.value) {
+    isFormValid.value = checkData();
+  }
 }
 
 async function refresh() {
@@ -177,6 +179,8 @@ async function openVolumeDialog(volume) {
   volumeDialogData.value.xfsBlockDevices = xfsBlockDevices;
 
   volumeDialog.value.open();
+
+  setTimeout(checkValidity, 100); // update state of the confirm button
 }
 
 async function onSubmit() {
@@ -278,13 +282,13 @@ onMounted(async () =>{
       :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 && volumeDialogIsValid"
+      :confirm-active="!volumeDialogData.busy && isFormValid"
       :confirm-busy="volumeDialogData.busy"
       @confirm="onSubmit()"
     >
-      <form ref="form" @submit.prevent="onSubmit()" autocomplete="off" @input="volumeDialogValid()">
+      <form ref="form" @submit.prevent="onSubmit()" autocomplete="off" @input="checkValidity()">
         <fieldset :disabled="volumeDialogData.busy">
-          <input style="display: none;" type="submit" :disabled="!volumeDialogIsValid" />
+          <input style="display: none;" type="submit" />
 
           <div class="error-label" v-show="volumeDialogData.error">{{ volumeDialogData.error }}</div>