Report form validity on submit for backup config dialog

dashboard/src/components/BackupDialog.vue

@@ -22,6 +22,7 @@ const minMemoryLimit = ref(1024 * 1024 * 1024); // 1 GB
 const maxMemoryLimit = ref(minMemoryLimit.value); // set later
 
 const dialog = useTemplateRef('dialog');
+const form = useTemplateRef('form');
 const config = ref({});
 const formError = ref({});
 
@@ -94,7 +95,7 @@ function onGcsKeyChange(event) {
 }
 
 async function onSubmit() {
-  if (!isValid.value) return;
+  if (!form.value.reportValidity()) return;
 
   const data = {
     provider: provider.value,
@@ -254,11 +255,6 @@ async function getMemory() {
   maxMemoryLimit.value = Math.ceil(result.memory / (1024*1024*1024)) * 1024 * 1024 * 1024;
 }
 
-const isValid = computed(() => {
-  // TODO basic validation
-  return true;
-});
-
 watch(provider, (newProvider) => {
   if (newProvider === 'scaleway-objectstorage') {
     // scaleway only supports 1000 parts per object (https://www.scaleway.com/en/docs/s3-multipart-upload/)
@@ -327,16 +323,15 @@ defineExpose({
   <Dialog ref="dialog"
     :title="$t('backups.configureBackupStorage.title')"
     :confirm-label="$t('main.dialog.save')"
-    :confirm-active="isValid"
     :confirm-busy="busy"
     :reject-label="busy ? null :$t('main.dialog.cancel')"
      reject-style="secondary"
     @confirm="onSubmit()"
   >
     <div>
-      <form @submit.prevent="onSubmit()" autocomplete="off">
-        <fieldset>
-          <input style="display: none;" type="submit" :disabled="isValid ? undefined : true"/>
+      <form @submit.prevent="onSubmit()" autocomplete="off" ref="form">
+        <fieldset :disabled="busy">
+          <input style="display: none;" type="submit"/>
           <p class="has-error" v-show="formError.generic">{{ formError.generic }}</p>
 
           <FormGroup>