diff --git a/app/views/console/databases/collection.phtml b/app/views/console/databases/collection.phtml
index 5e5d916916..9f8f77a9ba 100644
--- a/app/views/console/databases/collection.phtml
+++ b/app/views/console/databases/collection.phtml
@@ -511,6 +511,8 @@ $logs = $this->getParam('logs', null);
                 <div class="row responsive margin-top-negative">
                     <div class="col span-8 margin-bottom">
 
+                        <form id="permissions"></form>
+
                         <form
                             data-analytics
                             data-analytics-activity
@@ -595,7 +597,7 @@ $logs = $this->getParam('logs', null);
                                                         <option value="any">
                                                     </datalist>
 
-                                                    <input type="text" name="role" x-model="role" list="types" />
+                                                    <input required id="role" form="permissions" type="text" name="role" x-model="role" list="types" />
                                                 </td>
                                                 <td>
                                                     <input type="checkbox" name="read" x-model="read" />
diff --git a/public/scripts/permissions-matrix.js b/public/scripts/permissions-matrix.js
index 987f8eb666..94ee82cace 100644
--- a/public/scripts/permissions-matrix.js
+++ b/public/scripts/permissions-matrix.js
@@ -34,6 +34,7 @@
                 return { type, role };
             },
             addPermission(role, read, create, update, xdelete) {
+                if (!document.getElementById('role').reportValidity()) return;
                 if (read) this.rawPermissions.push(`read(${role})`);
                 if (create) this.rawPermissions.push(`create(${role})`);
                 if (update) this.rawPermissions.push(`update(${role})`);