diff --git a/dashboard/src/components/BackupProviderForm.vue b/dashboard/src/components/BackupProviderForm.vue
index 400731e4e..111398202 100644
--- a/dashboard/src/components/BackupProviderForm.vue
+++ b/dashboard/src/components/BackupProviderForm.vue
@@ -261,7 +261,8 @@ onMounted(async () => {
       <input type="file" id="gcsKeyFileInput" style="display:none" accept="application/json, text/json" @change="onGcsKeyChange"/>
       <label for="gcsKeyInput">{{ $t('backups.configureBackupStorage.gcsServiceKey') }}{{ providerConfig.projectId ? ` - project: ${providerConfig.projectId}` : '' }}</label>
       <InputGroup>
-        <TextInput readonly required style="flex-grow: 1" v-model="providerConfig.credentials.client_email" placeholder="Service account key" onclick="document.getElementById('gcsKeyFileInput').click();"/>
+        <input style="display: none" :value="providerConfig.credentials.client_email" required /> <!-- for form validation -->
+        <TextInput readonly style="cursor: pointer; flex-grow: 1" v-model="providerConfig.credentials.client_email" placeholder="Service account key" onclick="document.getElementById('gcsKeyFileInput').click();"/>
         <Button tool icon="fa fa-upload" onclick="document.getElementById('gcsKeyFileInput').click();"/>
       </InputGroup>
       <div class="error-label" v-show="gcsFileParseError">{{ gcsFileParseError }}</div>
diff --git a/dashboard/src/components/DomainProviderForm.vue b/dashboard/src/components/DomainProviderForm.vue
index a7b2cb2be..bf17cf93e 100644
--- a/dashboard/src/components/DomainProviderForm.vue
+++ b/dashboard/src/components/DomainProviderForm.vue
@@ -152,7 +152,8 @@ function onGcdnsFileInputChange(event) {
       <input type="file" id="gcdnsKeyFileInput" style="display:none" accept="application/json, text/json" @change="onGcdnsFileInputChange"/>
       <label class="control-label">{{ $t('domains.domainDialog.gcdnsServiceAccountKey') }}{{ dnsConfig.projectId ? ` - project: ${dnsConfig.projectId}` : '' }}</label>
       <InputGroup>
-        <TextInput readonly required style="flex-grow: 1" v-model="dnsConfig.credentials.client_email" placeholder="Service account key" onclick="getElementById('gcdnsKeyFileInput').click();"/>
+        <input style="display: none" :value="dnsConfig.credentials.client_email" required /> <!-- for form validation -->
+        <TextInput readonly style="cursor: pointer; flex-grow: 1" v-model="dnsConfig.credentials.client_email" placeholder="Service account key" onclick="getElementById('gcdnsKeyFileInput').click();"/>
         <Button tool icon="fa fa-upload" onclick="document.getElementById('gcdnsKeyFileInput').click();"/>
       </InputGroup>
       <div class="error-label" v-show="gcdnsFileParseError">{{ gcdnsFileParseError }}</div>