diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json
index 72d0f1b40..d7d01b279 100644
--- a/dashboard/package-lock.json
+++ b/dashboard/package-lock.json
@@ -6,7 +6,7 @@
   "packages": {
     "": {
       "dependencies": {
-        "@cloudron/pankow": "^3.5.13",
+        "@cloudron/pankow": "^3.5.14",
         "@fontsource/inter": "^5.2.8",
         "@fortawesome/fontawesome-free": "^7.1.0",
         "@vitejs/plugin-vue": "^6.0.2",
@@ -76,9 +76,9 @@
       }
     },
     "node_modules/@cloudron/pankow": {
-      "version": "3.5.13",
-      "resolved": "https://registry.npmjs.org/@cloudron/pankow/-/pankow-3.5.13.tgz",
-      "integrity": "sha512-7f3rtPdb//yxnP1jNa4ieWDah36MK68dqvM/PfW/SPljKLFBz7JGEjp8eRY2/fCBD+OiUrGdi/dkaDR1eVe3tg==",
+      "version": "3.5.14",
+      "resolved": "https://registry.npmjs.org/@cloudron/pankow/-/pankow-3.5.14.tgz",
+      "integrity": "sha512-8fI82oF0mMA1fd1/FRS+TS6V5Sa8Mu2SoF7/Og7MSkHevuYXDT2QDt9DaGxScQf6Ho/bkgzrbHCEZmKHMJdI+g==",
       "license": "ISC",
       "dependencies": {
         "@fontsource/inter": "^5.2.8",
@@ -2667,9 +2667,9 @@
       }
     },
     "@cloudron/pankow": {
-      "version": "3.5.13",
-      "resolved": "https://registry.npmjs.org/@cloudron/pankow/-/pankow-3.5.13.tgz",
-      "integrity": "sha512-7f3rtPdb//yxnP1jNa4ieWDah36MK68dqvM/PfW/SPljKLFBz7JGEjp8eRY2/fCBD+OiUrGdi/dkaDR1eVe3tg==",
+      "version": "3.5.14",
+      "resolved": "https://registry.npmjs.org/@cloudron/pankow/-/pankow-3.5.14.tgz",
+      "integrity": "sha512-8fI82oF0mMA1fd1/FRS+TS6V5Sa8Mu2SoF7/Og7MSkHevuYXDT2QDt9DaGxScQf6Ho/bkgzrbHCEZmKHMJdI+g==",
       "requires": {
         "@fontsource/inter": "^5.2.8",
         "@fortawesome/fontawesome-free": "^7.1.0",
diff --git a/dashboard/package.json b/dashboard/package.json
index ed8528af9..1d377f1a0 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -7,7 +7,7 @@
   },
   "type": "module",
   "dependencies": {
-    "@cloudron/pankow": "^3.5.13",
+    "@cloudron/pankow": "^3.5.14",
     "@fontsource/inter": "^5.2.8",
     "@fortawesome/fontawesome-free": "^7.1.0",
     "@vitejs/plugin-vue": "^6.0.2",
diff --git a/dashboard/src/components/ApiTokens.vue b/dashboard/src/components/ApiTokens.vue
index bc8328091..9f0319e5b 100644
--- a/dashboard/src/components/ApiTokens.vue
+++ b/dashboard/src/components/ApiTokens.vue
@@ -5,7 +5,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import moment from 'moment-timezone';
-import { ref, onMounted, computed, useTemplateRef } from 'vue';
+import { ref, onMounted, useTemplateRef } from 'vue';
 import { Button, Menu, ClipboardButton, Dialog, InputDialog, FormGroup, Radiobutton, TableView, TextInput, InputGroup } from '@cloudron/pankow';
 import { prettyLongDate } from '@cloudron/pankow/utils';
 import { TOKEN_TYPES } from '../constants.js';
@@ -60,11 +60,15 @@ function onActionMenu(apiToken, event) {
   actionMenuElement.value.open(event, event.currentTarget);
 }
 
-const isValid = computed(() => {
-  if (!tokenName.value) return false;
-  if (!(tokenScope.value === 'r' || tokenScope.value === 'rw')) return false;
-  return true;
-});
+const form = useTemplateRef('form');
+const isFormValid = ref(false);
+function checkValidity() {
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
+
+  if (isFormValid.value) {
+    if (!(tokenScope.value === 'r' || tokenScope.value === 'rw')) isFormValid.value = false;
+  }
+}
 
 async function refreshApiTokens() {
   const [error, tokens] = await tokensModel.list();
@@ -74,7 +78,7 @@ async function refreshApiTokens() {
 }
 
 async function onSubmitAddApiToken(){
-  if (!isValid.value) return;
+  if (!form.value.reportValidity()) return;
 
   const scope = { '*': tokenScope.value };
   const allowedIpRanges = tokenAllowedIpRanges.value;
@@ -96,6 +100,7 @@ function onReset() {
     tokenScope.value = 'rw';
     tokenAllowedIpRanges.value = '';
     tokenAllowedIpRangesError.value = '';
+    setTimeout(checkValidity, 100); // update state of the confirm button
   }, 500);
 }
 
@@ -131,7 +136,7 @@ onMounted(async () => {
     <Dialog ref="newDialog"
       :title="$t('profile.createApiToken.title')"
       :confirm-label="addedToken ? '' : $t('main.action.add')"
-      :confirm-active="isValid"
+      :confirm-active="isFormValid"
        confirm-style="primary"
       :reject-label="addedToken ? $t('main.dialog.close') : $t('main.dialog.cancel')"
        reject-style="secondary"
@@ -141,8 +146,8 @@ onMounted(async () => {
       <div>
         <Transition name="slide-left" mode="out-in">
           <div v-if="!addedToken">
-            <form @submit.prevent="onSubmitAddApiToken()" autocomplete="off">
-              <input style="display: none" type="submit" :disabled="!isValid"/>
+            <form @submit.prevent="onSubmitAddApiToken()" autocomplete="off" ref="form" @input="checkValidity()">
+              <input style="display: none" type="submit"/>
               <FormGroup>
                 <label for="apiTokenName">{{ $t('profile.createApiToken.name') }}</label>
                 <TextInput id="apiTokenName" v-model="tokenName" required/>
diff --git a/dashboard/src/components/AppImportDialog.vue b/dashboard/src/components/AppImportDialog.vue
index e5682a4bb..95d34ae9b 100644
--- a/dashboard/src/components/AppImportDialog.vue
+++ b/dashboard/src/components/AppImportDialog.vue
@@ -10,7 +10,6 @@ import { REGIONS_CONTABO, REGIONS_VULTR, REGIONS_IONOS, REGIONS_OVH, REGIONS_LIN
 const appsModel = AppsModel.create();
 
 const dialog = useTemplateRef('dialog');
-const form = useTemplateRef('form');
 const backupConfigInput = useTemplateRef('backupConfigInput');
 const appId = ref('');
 const busy = ref(false);
@@ -24,6 +23,7 @@ const encryptionPasswordHint = ref('');
 const encryptionPassword = ref('');
 const encryptedFilenames = ref(false);
 
+const form = useTemplateRef('form');
 const isFormValid = ref(false);
 function checkValidity() {
   isFormValid.value = form.value ? form.value.checkValidity() : false;
@@ -279,6 +279,8 @@ defineExpose({
     encryptionPasswordHint.value = '';
 
     dialog.value.open();
+
+    setTimeout(checkValidity, 100); // update state of the confirm button
   }
 });
 
diff --git a/dashboard/src/components/AppPasswords.vue b/dashboard/src/components/AppPasswords.vue
index 0949fcb1d..f5b38a381 100644
--- a/dashboard/src/components/AppPasswords.vue
+++ b/dashboard/src/components/AppPasswords.vue
@@ -5,7 +5,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import moment from 'moment-timezone';
-import { ref, onMounted, useTemplateRef, computed } from 'vue';
+import { ref, onMounted, useTemplateRef } from 'vue';
 import { Button, Menu, ClipboardButton, Dialog, SingleSelect, FormGroup, TextInput, TableView, InputDialog, InputGroup } from '@cloudron/pankow';
 import { prettyLongDate } from '@cloudron/pankow/utils';
 import Section from './Section.vue';
@@ -77,22 +77,23 @@ async function refresh() {
   passwords.value = result;
 }
 
+const form = useTemplateRef('form');
+const isFormValid = ref(false);
+function checkValidity() {
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
+}
+
 function onReset() {
   setTimeout(() => {
     passwordName.value = '';
     identifier.value = '';
     addedPassword.value = '';
+    setTimeout(checkValidity, 100); // update state of the confirm button
   }, 500);
 }
 
-const isValid = computed(() => {
-  if (!passwordName.value) return false;
-  if (!identifier.value) return false;
-  return true;
-});
-
 async function onSubmit() {
-  if (!isValid.value) return;
+  if (!form.value.reportValidity()) return;
 
   addedPassword.value = '';
 
@@ -163,7 +164,7 @@ onMounted(async () => {
 
     <Dialog ref="newDialog"
       :title="$t('profile.createAppPassword.title')"
-      :confirm-active="addedPassword || isValid"
+      :confirm-active="addedPassword || isFormValid"
       :confirm-label="addedPassword ? '' : $t('main.action.add')"
        confirm-style="primary"
       :reject-label="addedPassword ? $t('main.dialog.close') : $t('main.dialog.cancel')"
@@ -174,8 +175,8 @@ onMounted(async () => {
       <div>
         <Transition name="slide-left" mode="out-in">
           <div v-if="!addedPassword">
-            <form @submit.prevent="onSubmit()" autocomplete="off">
-              <input style="display: none" type="submit" :disabled="!isValid"/>
+            <form @submit.prevent="onSubmit()" autocomplete="off" ref="form" @input="checkValidity()">
+              <input style="display: none" type="submit"/>
               <FormGroup>
                 <label for="passwordName">{{ $t('profile.createAppPassword.name') }}</label>
                 <TextInput id="passwordName" v-model="passwordName" required/>
@@ -183,7 +184,7 @@ onMounted(async () => {
 
               <FormGroup>
                 <label>{{ $t('profile.createAppPassword.app') }}</label>
-                <SingleSelect outline v-model="identifier" :options="identifiers" option-label="label" option-key="id" />
+                <SingleSelect outline v-model="identifier" :options="identifiers" option-label="label" option-key="id" required/>
               </FormGroup>
             </form>
           </div>
diff --git a/dashboard/src/components/ApplinkDialog.vue b/dashboard/src/components/ApplinkDialog.vue
index 547b92437..6784d11bc 100644
--- a/dashboard/src/components/ApplinkDialog.vue
+++ b/dashboard/src/components/ApplinkDialog.vue
@@ -38,26 +38,29 @@ const accessRestriction = ref({
   groups: [],
 });
 
-const isValid = computed(() => {
-  if (busy.value) return false;
-  if (!upstreamUri.value) return false;
-
-  try {
-    new URL(upstreamUri.value);
-    // eslint-disable-next-line no-unused-vars
-  } catch (e) {
-    return false;
-  }
-
-  return true;
-});
-
 let iconFile = 'src';
 function onIconChanged(file) {
   iconFile = file;
 }
 
+const form = useTemplateRef('form');
+const isFormValid = ref(false);
+function checkValidity() {
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
+
+  if (isFormValid.value) {
+    try {
+      new URL(upstreamUri.value);
+      // eslint-disable-next-line no-unused-vars
+    } catch (e) {
+      isFormValid.value = false;
+    }
+  }
+}
+
 async function onSubmit() {
+  if (!form.value.reportValidity()) return;
+
   busy.value = true;
 
   const data = {
@@ -134,6 +137,8 @@ defineExpose({
     groups.value = result;
 
     applinkDialog.value.open();
+
+    setTimeout(checkValidity, 100); // update state of the confirm button
   }
 });
 
@@ -147,16 +152,16 @@ defineExpose({
     :reject-label="$t('main.dialog.cancel')"
      reject-style="secondary"
     :confirm-label="mode === 'edit' ? $t('main.dialog.save') : $t('main.action.add')"
-    :confirm-active="isValid"
+    :confirm-active="!busy && isFormValid"
     :confirm-busy="busy"
     @confirm="onSubmit()"
     @alternate="onRemove()"
   >
     <InputDialog ref="inputDialog" />
 
-    <form @submit.prevent="onSubmit()" autocomplete="off">
+    <form @submit.prevent="onSubmit()" autocomplete="off" ref="form" @input="checkValidity()">
       <fieldset :disabled="busy">
-        <input style="display: none;" type="submit" :disabled="!isValid" />
+        <input style="display: none;" type="submit" />
 
         <p class="has-error" v-show="error.generic">{{ error.generic }}</p>
 
diff --git a/dashboard/src/components/DisableTwoFADialog.vue b/dashboard/src/components/DisableTwoFADialog.vue
index d5e8d62c8..ba31d315c 100644
--- a/dashboard/src/components/DisableTwoFADialog.vue
+++ b/dashboard/src/components/DisableTwoFADialog.vue
@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, useTemplateRef, computed } from 'vue';
+import { ref, useTemplateRef } from 'vue';
 import { PasswordInput, Dialog, FormGroup } from '@cloudron/pankow';
 import ProfileModel from '../models/ProfileModel.js';
 
@@ -13,14 +13,14 @@ const formError = ref({});
 const busy = ref (false);
 const password = ref('');
 
-const isFormValid = computed(() => {
-  if (!password.value) return false;
-
-  return true;
-});
+const form = useTemplateRef('form');
+const isFormValid = ref(false);
+function checkValidity() {
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
+}
 
 async function onSubmit() {
-  if (!isFormValid.value) return;
+  if (!form.value.reportValidity()) return;
 
   busy.value = true;
   formError.value = {};
@@ -51,6 +51,8 @@ defineExpose({
     busy.value = false;
     formError.value = {};
     dialog.value.open();
+
+    setTimeout(checkValidity, 100); // update state of the confirm button
   }
 });
 
@@ -68,15 +70,15 @@ defineExpose({
      reject-style="secondary"
      @confirm="onSubmit"
   >
-    <form @submit.prevent="onSubmit">
+    <form @submit.prevent="onSubmit" autocomplete="off" ref="form"  @input="checkValidity()">
       <fieldset :disabled="busy">
-        <input type="submit" style="display: none;" :disabled="!isFormValid"/>
+        <input type="submit" style="display: none;">
 
         <div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>
 
         <FormGroup :has-error="formError.password">
           <label>{{ $t('profile.disable2FA.password') }}</label>
-          <PasswordInput v-model="password" />
+          <PasswordInput v-model="password" required />
           <div class="error-label" v-if="formError.password">{{ formError.password }}</div>
         </FormGroup>
       </fieldset>
diff --git a/dashboard/src/components/FallbackEmailDialog.vue b/dashboard/src/components/FallbackEmailDialog.vue
index ef9d1a365..7908af836 100644
--- a/dashboard/src/components/FallbackEmailDialog.vue
+++ b/dashboard/src/components/FallbackEmailDialog.vue
@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, useTemplateRef, computed } from 'vue';
+import { ref, useTemplateRef } from 'vue';
 import { EmailInput, PasswordInput, Dialog, FormGroup } from '@cloudron/pankow';
 import { isValidEmail } from '@cloudron/pankow/utils';
 import ProfileModel from '../models/ProfileModel.js';
@@ -15,15 +15,18 @@ const busy = ref (false);
 const email = ref('');
 const password = ref('');
 
-const isFormValid = computed(() => {
-  if (email.value && !isValidEmail(email.value)) return false;
-  if (!password.value) return false;
+const form = useTemplateRef('form');
+const isFormValid = ref(false);
+function checkValidity() {
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
 
-  return true;
-});
+  if (isFormValid.value) {
+    if (!isValidEmail(email.value)) isFormValid.value = false;
+  }
+}
 
 async function onSubmit() {
-  if (!isFormValid.value) return;
+  if (!form.value.reportValidity()) return;
 
   busy.value = true;
   formError.value = {};
@@ -56,6 +59,8 @@ defineExpose({
     busy.value = false;
     formError.value = {};
     dialog.value.open();
+
+    setTimeout(checkValidity, 100); // update state of the confirm button
   }
 });
 
@@ -73,21 +78,21 @@ defineExpose({
      reject-style="secondary"
      @confirm="onSubmit"
   >
-    <form @submit.prevent="onSubmit" autocomplete="off">
+    <form @submit.prevent="onSubmit" autocomplete="off" ref="form"  @input="checkValidity()">
       <fieldset :disabled="busy">
-        <input type="submit" style="display: none;" :disabled="!isFormValid"/>
+        <input type="submit" style="display: none;"/>
 
         <div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>
 
         <FormGroup :has-error="formError.email">
           <label>{{ $t('profile.changeEmail.email') }}</label>
-          <EmailInput v-model="email" />
+          <EmailInput v-model="email" required/>
           <div class="error-label" v-if="formError.email">{{ formError.email }}</div>
         </FormGroup>
 
         <FormGroup :has-error="formError.password">
           <label>{{ $t('profile.changeEmail.password') }}</label>
-          <PasswordInput v-model="password" />
+          <PasswordInput v-model="password" required/>
           <div class="error-label" v-if="formError.password">{{ formError.password }}</div>
         </FormGroup>
       </fieldset>
diff --git a/dashboard/src/components/Ipv4Config.vue b/dashboard/src/components/Ipv4Config.vue
index f31dabeab..ba868479a 100644
--- a/dashboard/src/components/Ipv4Config.vue
+++ b/dashboard/src/components/Ipv4Config.vue
@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, onMounted, useTemplateRef, computed } from 'vue';
+import { ref, onMounted, useTemplateRef } from 'vue';
 import { Button, Dialog, SingleSelect, FormGroup, TextInput, ClipboardAction } from '@cloudron/pankow';
 import Section from  '../components/Section.vue';
 import NetworkModel from  '../models/NetworkModel.js';
@@ -36,12 +36,16 @@ const editProvider = ref('');
 const editAddress = ref('');
 const editInterfaceName = ref('');
 
-const isValid = computed(() => {
-  if (editProvider.value === 'fixed' && !editAddress.value) return false;
-  if (editProvider.value === 'network-interface' && !editInterfaceName.value) return false;
+const form = useTemplateRef('form');
+const isFormValid = ref(false);
+function checkValidity() {
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
 
-  return true;
-});
+  if (isFormValid.value) {
+    if (editProvider.value === 'fixed' && !editAddress.value) isFormValid.value = false;
+    if (editProvider.value === 'network-interface' && !editInterfaceName.value) isFormValid.value = false;
+  }
+}
 
 async function refresh() {
   let [error, result] = await networkModel.getIpv4Config();
@@ -65,10 +69,11 @@ function onConfigure() {
   editInterfaceName.value = interfaceName.value || '';
 
   dialog.value.open();
+  setTimeout(checkValidity, 100); // update state of the confirm button
 }
 
 async function onSubmit() {
-  if (!isValid.value) return;
+  if (!form.value.reportValidity()) return;
 
   editBusy.value = true;
   editError.value = {};
@@ -100,19 +105,19 @@ onMounted(async () => {
       :title="$t('network.configureIp.title')"
       :confirm-label="$t('main.dialog.save')"
       :confirm-busy="editBusy"
-      :confirm-active="isValid"
+      :confirm-active="!editBusy && isFormValid"
       :reject-label="$t('main.dialog.cancel')"
        reject-style="secondary"
       @confirm="onSubmit()"
     >
       <div>
-        <form novalidate @submit.prevent="onSubmit()" autocomplete="off">
+        <form novalidate @submit.prevent="onSubmit()" autocomplete="off" ref="form" @input="checkValidity()">
           <fieldset :disabled="editBusy">
-            <input style="display: none" type="submit" :disabled="editBusy || !isValid"/>
+            <input style="display: none" type="submit"/>
 
             <FormGroup>
               <label for="providerInput">{{ $t('network.ip.provider') }} <sup><a href="https://docs.cloudron.io/networking/#ipv4" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
-              <SingleSelect id="providerInput" v-model="editProvider" :options="providers" option-key="value" option-label="name"/>
+              <SingleSelect id="providerInput" v-model="editProvider" :options="providers" option-key="value" option-label="name" required/>
               <div class="has-error" v-show="editError.generic">{{ editError.generic }}</div>
             </FormGroup>
 
diff --git a/dashboard/src/components/Ipv6Config.vue b/dashboard/src/components/Ipv6Config.vue
index 096e36540..74c03d721 100644
--- a/dashboard/src/components/Ipv6Config.vue
+++ b/dashboard/src/components/Ipv6Config.vue
@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, onMounted, useTemplateRef, computed } from 'vue';
+import { ref, onMounted, useTemplateRef } from 'vue';
 import { Button, Dialog, SingleSelect, FormGroup, TextInput, ClipboardAction } from '@cloudron/pankow';
 import Section from  '../components/Section.vue';
 import NetworkModel from  '../models/NetworkModel.js';
@@ -36,12 +36,16 @@ const editProvider = ref('');
 const editAddress = ref('');
 const editInterfaceName = ref('');
 
-const isValid = computed(() => {
-  if (editProvider.value === 'fixed' && !editAddress.value) return false;
-  if (editProvider.value === 'network-interface' && !editInterfaceName.value) return false;
+const form = useTemplateRef('form');
+const isFormValid = ref(false);
+function checkValidity() {
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
 
-  return true;
-});
+  if (isFormValid.value) {
+    if (editProvider.value === 'fixed' && !editAddress.value) isFormValid.value = false;
+    if (editProvider.value === 'network-interface' && !editInterfaceName.value) isFormValid.value = false;
+  }
+}
 
 async function refresh() {
   let [error, result] = await networkModel.getIpv6Config();
@@ -65,10 +69,11 @@ function onConfigure() {
   editInterfaceName.value = interfaceName.value || '';
 
   dialog.value.open();
+  setTimeout(checkValidity, 100); // update state of the confirm button
 }
 
 async function onSubmit() {
-  if (!isValid.value) return;
+  if (!form.value.reportValidity()) return;
 
   editBusy.value = true;
   editError.value = {};
@@ -100,19 +105,19 @@ onMounted(async () => {
       :title="$t('network.configureIpv6.title')"
       :confirm-label="$t('main.dialog.save')"
       :confirm-busy="editBusy"
-      :confirm-active="isValid"
+      :confirm-active="!editBusy && isFormValid"
       :reject-label="$t('main.dialog.cancel')"
        reject-style="secondary"
       @confirm="onSubmit()"
     >
       <div>
-        <form novalidate @submit.prevent="onSubmit()" autocomplete="off">
+        <form novalidate @submit.prevent="onSubmit()" autocomplete="off" ref="form" @input="checkValidity()">
           <fieldset :disabled="editBusy">
-            <input style="display: none" type="submit" :disabled="editBusy || !isValid"/>
+            <input style="display: none" type="submit" />
 
             <FormGroup>
               <label for="providerInput">{{ $t('network.ip.provider') }} <sup><a href="https://docs.cloudron.io/networking/#ipv4" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
-              <SingleSelect id="providerInput" v-model="editProvider" :options="providers" option-key="value" option-label="name"/>
+              <SingleSelect id="providerInput" v-model="editProvider" :options="providers" option-key="value" option-label="name" required/>
               <div class="error-label" v-show="editError.generic">{{ editError.generic }}</div>
             </FormGroup>
 
diff --git a/dashboard/src/components/LdapServer.vue b/dashboard/src/components/LdapServer.vue
index bcbc4b3d9..75c62e248 100644
--- a/dashboard/src/components/LdapServer.vue
+++ b/dashboard/src/components/LdapServer.vue
@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, onMounted, computed } from 'vue';
+import { ref, onMounted, useTemplateRef } from 'vue';
 import { Button, FormGroup, ClipboardButton, Checkbox, PasswordInput, TextInput, InputGroup } from '@cloudron/pankow';
 import Section from './Section.vue';
 import DomainsModel from '../models/DomainsModel.js';
@@ -19,17 +19,14 @@ const ldapUrl = ref('');
 const secret = ref('');
 const allowlist = ref('');
 
-const isValid = computed(() => {
-  if (enabled.value) {
-    if (!secret.value) return false;
-    if (!allowlist.value) return false;
-  }
-
-  return true;
-});
+const form = useTemplateRef('form');
+const isFormValid = ref(false);
+function checkValidity() {
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
+}
 
 async function onSubmit() {
-  if (!isValid.value) return;
+  if (!form.value.reportValidity()) return;
 
   busy.value = true;
   editError.value = {};
@@ -65,6 +62,8 @@ onMounted(async () => {
   enabled.value = result.enabled;
   secret.value = result.secret;
   allowlist.value = result.allowlist;
+
+  setTimeout(checkValidity, 100); // update state of the confirm button
 });
 
 </script>
@@ -73,9 +72,9 @@ onMounted(async () => {
   <Section :title="$t('users.exposedLdap.title')">
     <div>{{ $t('users.exposedLdap.description') }}</div>
 
-    <form @submit.prevent="onSubmit()" autocomplete="off">
+    <form novalidate @submit.prevent="onSubmit()" autocomplete="off" ref="form" @input="checkValidity()">
       <fieldset :disabled="busy">
-        <input style="display: none" type="submit" :disabled="busy || !isValid" />
+        <input style="display: none" type="submit" />
 
         <Checkbox v-model="enabled" :label="$t('users.exposedLdap.enabled')" help-url="https://docs.cloudron.io/user-directory/#ldap-directory-server"/>
 
@@ -108,6 +107,6 @@ onMounted(async () => {
     <div class="error-label" v-show="editError.generic">{{ editError.generic }}</div>
 
     <br/>
-    <Button :loading="busy" :disabled="!isValid || busy" @click="onSubmit()">{{ $t('users.settings.saveAction') }}</Button>
+    <Button :loading="busy" :disabled="!isFormValid || busy" @click="onSubmit()">{{ $t('users.settings.saveAction') }}</Button>
   </Section>
 </template>
diff --git a/dashboard/src/components/PasswordChangeDialog.vue b/dashboard/src/components/PasswordChangeDialog.vue
index 209bfa723..ce331c5c5 100644
--- a/dashboard/src/components/PasswordChangeDialog.vue
+++ b/dashboard/src/components/PasswordChangeDialog.vue
@@ -15,16 +15,18 @@ const newPassword = ref('');
 const newPasswordRepeat = ref('');
 const password = ref('');
 
-const isFormValid = computed(() => {
-  if (!newPassword.value) return false;
-  if (newPasswordRepeat.value !== newPassword.value) return false;
-  if (!password.value) return false;
+const form = useTemplateRef('form');
+const isFormValid = ref(false);
+function checkValidity() {
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
 
-  return true;
-});
+  if (isFormValid.value) {
+      if (newPasswordRepeat.value !== newPassword.value) isFormValid.value = false;
+  }
+}
 
 async function onSubmit() {
-  if (!isFormValid.value) return;
+  if (!form.value.reportValidity()) return;
 
   busy.value = true;
   formError.value = {};
@@ -58,6 +60,8 @@ defineExpose({
     busy.value = false;
     formError.value = {};
     dialog.value.open();
+
+    setTimeout(checkValidity, 100); // update state of the confirm button
   }
 });
 
@@ -75,27 +79,27 @@ defineExpose({
      reject-style="secondary"
      @confirm="onSubmit"
   >
-    <form @submit.prevent="onSubmit">
+    <form @submit.prevent="onSubmit" autocomplete="off" ref="form"  @input="checkValidity()">
       <fieldset :disabled="busy">
-        <input type="submit" style="display: none;" :disabled="!isFormValid"/>
+        <input type="submit" style="display: none;">
 
         <div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>
 
         <FormGroup :has-error="formError.newPassword">
           <label>{{ $t('profile.changePassword.newPassword') }}</label>
-          <PasswordInput v-model="newPassword" />
+          <PasswordInput v-model="newPassword" required/>
           <div class="error-label" v-if="formError.newPassword">{{ formError.newPassword }}</div>
         </FormGroup>
 
         <FormGroup :has-error="newPasswordRepeat.length !== 0 && newPassword !== newPasswordRepeat">
           <label>{{ $t('profile.changePassword.newPasswordRepeat') }}</label>
-          <PasswordInput v-model="newPasswordRepeat" />
+          <PasswordInput v-model="newPasswordRepeat" required />
           <div class="error-label" v-if="newPasswordRepeat.length && newPassword !== newPasswordRepeat">{{ $t('profile.changePassword.errorPasswordsDontMatch') }}</div>
         </FormGroup>
 
         <FormGroup :has-error="formError.password">
           <label>{{ $t('profile.changePassword.currentPassword') }}</label>
-          <PasswordInput v-model="password" />
+          <PasswordInput v-model="password" required />
           <div class="error-label" v-if="formError.password">{{ formError.password }}</div>
         </FormGroup>
       </fieldset>
diff --git a/dashboard/src/components/PrimaryEmailDialog.vue b/dashboard/src/components/PrimaryEmailDialog.vue
index 4f574a575..81ac0a380 100644
--- a/dashboard/src/components/PrimaryEmailDialog.vue
+++ b/dashboard/src/components/PrimaryEmailDialog.vue
@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, useTemplateRef, computed } from 'vue';
+import { ref, useTemplateRef } from 'vue';
 import { EmailInput, PasswordInput, Dialog, FormGroup } from '@cloudron/pankow';
 import { isValidEmail } from '@cloudron/pankow/utils';
 import ProfileModel from '../models/ProfileModel.js';
@@ -15,15 +15,19 @@ const busy = ref (false);
 const email = ref('');
 const password = ref('');
 
-const isFormValid = computed(() => {
-  if (!isValidEmail(email.value)) return false;
-  if (!password.value) return false;
+const form = useTemplateRef('form');
+const isFormValid = ref(false);
+function checkValidity() {
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
+
+  if (isFormValid.value) {
+    if (!isValidEmail(email.value)) isFormValid.value = false;
+  }
+}
 
-  return true;
-});
 
 async function onSubmit() {
-  if (!isFormValid.value) return;
+  if (!form.value.reportValidity()) return;
 
   busy.value = true;
   formError.value = {};
@@ -56,6 +60,8 @@ defineExpose({
     busy.value = false;
     formError.value = {};
     dialog.value.open();
+
+    setTimeout(checkValidity, 100); // update state of the confirm button
   }
 });
 
@@ -73,21 +79,21 @@ defineExpose({
      reject-style="secondary"
      @confirm="onSubmit"
   >
-    <form @submit.prevent="onSubmit" autocomplete="off">
+    <form @submit.prevent="onSubmit" autocomplete="off" ref="form"  @input="checkValidity()">
       <fieldset :disabled="busy">
-        <input type="submit" style="display: none;" :disabled="!isFormValid"/>
+        <input type="submit" style="display: none;"/>
 
         <div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>
 
         <FormGroup :has-error="formError.email">
           <label>{{ $t('profile.changeEmail.email') }}</label>
-          <EmailInput v-model="email" />
+          <EmailInput v-model="email" required/>
           <div class="error-label" v-if="formError.email">{{ formError.email }}</div>
         </FormGroup>
 
         <FormGroup :has-error="formError.password">
           <label>{{ $t('profile.changeEmail.password') }}</label>
-          <PasswordInput v-model="password" />
+          <PasswordInput v-model="password" required />
           <div class="error-label" v-if="formError.password">{{ formError.password }}</div>
         </FormGroup>
       </fieldset>
diff --git a/dashboard/src/views/ActivationView.vue b/dashboard/src/views/ActivationView.vue
index b6330637c..2b4f964b7 100644
--- a/dashboard/src/views/ActivationView.vue
+++ b/dashboard/src/views/ActivationView.vue
@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, computed, onMounted } from 'vue';
+import { ref, useTemplateRef, onMounted } from 'vue';
 import { Button, Checkbox, FormGroup, TextInput, PasswordInput, EmailInput } from '@cloudron/pankow';
 import ProvisionModel from '../models/ProvisionModel.js';
 import { redirectIfNeeded } from '../utils.js';
@@ -16,18 +16,14 @@ const password = ref('');
 const setupToken = ref('');
 const acceptLicense = ref(false);
 
-const isValid = computed(() => {
-  if (!displayName.value) return false;
-  if (!email.value) return false;
-  if (!username.value) return false;
-  if (!password.value) return false;
-  if (!acceptLicense.value) return false;
-
-  return true;
-});
+const form = useTemplateRef('form');
+const isFormValid = ref(false);
+function checkValidity() {
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
+}
 
 async function onOwnerSubmit() {
-  if (!isValid.value) return;
+  if (!form.value.reportValidity()) return;
 
   busy.value = true;
   formError.value = {};
@@ -85,9 +81,9 @@ onMounted(async () => {
 
       <div class="has-error" v-if="formError.generic">{{ formError.generic }}</div>
 
-      <form @submit.prevent="onOwnerSubmit()" autocomplete="off">
+      <form @submit.prevent="onOwnerSubmit()" autocomplete="off" ref="form" @input="checkValidity()">
         <fieldset :disabled="busy">
-          <input type="submit" style="display: none;" :disabled="busy || !isValid"/>
+          <input type="submit" style="display: none;"/>
 
           <FormGroup :has-error="formError.displayName">
             <label for="displayNameInput">Full name</label>
@@ -118,7 +114,7 @@ onMounted(async () => {
         </fieldset>
 
         <div class="actions">
-          <Button :disabled="busy || !isValid" :loading="busy" @click="onOwnerSubmit()">Create admin</Button>
+          <Button :disabled="busy || !isFormValid" :loading="busy" @click="onOwnerSubmit()">Create admin</Button>
         </div>
       </form>
     </div>
diff --git a/dashboard/src/views/OpenIdView.vue b/dashboard/src/views/OpenIdView.vue
index ae644f3ee..720683337 100644
--- a/dashboard/src/views/OpenIdView.vue
+++ b/dashboard/src/views/OpenIdView.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import { ref, onMounted, useTemplateRef, computed } from 'vue';
+import { ref, onMounted, useTemplateRef } from 'vue';
 import { Button, ClipboardButton, SingleSelect, Menu, Dialog, TableView, FormGroup, TextInput, InputGroup, InputDialog } from '@cloudron/pankow';
 import Section from '../components/Section.vue';
 import DashboardModel from '../models/DashboardModel.js';
@@ -59,13 +59,11 @@ const signatureAlgorithms = [
   { name: 'EdDSA', value: 'EdDSA' },
 ];
 
-const isValid = computed(() => {
-  if (!clientName.value) return false;
-  if (!clientLoginRedirectUri.value) return false;
-  if (!clientTokenSignatureAlgorithm.value) return false;
-
-  return true;
-});
+const form = useTemplateRef('form');
+const isFormValid = ref(false);
+function checkValidity() {
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
+}
 
 async function onAdd() {
   submitBusy.value = false;
@@ -76,6 +74,7 @@ async function onAdd() {
   clientTokenSignatureAlgorithm.value = 'RS256';
 
   editDialog.value.open();
+  setTimeout(checkValidity, 100); // update state of the confirm button
 }
 
 async function onEdit(client) {
@@ -87,10 +86,11 @@ async function onEdit(client) {
   clientTokenSignatureAlgorithm.value = client.tokenSignatureAlgorithm;
 
   editDialog.value.open();
+  setTimeout(checkValidity, 100); // update state of the confirm button
 }
 
 async function onSubmit() {
-  if (!isValid.value) return;
+  if (!form.value.reportValidity()) return;
 
   submitBusy.value = true;
   let error, client;
@@ -185,15 +185,15 @@ onMounted(async () => {
 
     <Dialog ref="editDialog"
       :title="clientId ? $t('oidc.editClientDialog.title') : $t('oidc.newClientDialog.title')"
-      :confirm-active="isValid"
+      :confirm-active="!submitBusy && isFormValid"
       :confirm-busy="submitBusy"
       :confirm-label="clientId ? $t('main.dialog.save') : $t('oidc.newClientDialog.createAction')"
       :reject-label="$t('main.dialog.cancel')"
        reject-style="secondary"
        @confirm="onSubmit()"
     >
-      <form novalidate @submit.prevent="onSubmit()" autocomplete="off">
-        <input style="display: none" type="submit" :disabled="!isValid"/>
+      <form @submit.prevent="onSubmit()" autocomplete="off" ref="form" @input="checkValidity()">
+        <input style="display: none" type="submit" />
 
         <div class="error-label" v-if="submitError">{{ submitError }}</div>
 
@@ -226,7 +226,7 @@ onMounted(async () => {
 
         <FormGroup>
           <label class="control-label">{{ $t('oidc.client.signingAlgorithm') }}</label>
-          <SingleSelect v-model="clientTokenSignatureAlgorithm" :options="signatureAlgorithms" option-key="value" option-label="name" />
+          <SingleSelect v-model="clientTokenSignatureAlgorithm" :options="signatureAlgorithms" option-key="value" option-label="name" required />
         </FormGroup>
       </form>
     </Dialog>